Nowadays, most websites use different methods and techniques to decrease the load and data served to their clients’ devices. One of these techniques is the infinite scroll.
In this tutorial, we will see how we can scrape infinite scroll web pages using a js_scenario, specifically the scroll_y and scroll_x features. And we will use this page as a demo. Only 9 boxes are loaded when we first open the page, but as soon as we scroll to the end of it, we will load 9 more, and that will keep happening each time we scroll to the bottom of the page.
First let’s make a request without the scroll_y parameter and see what the result looks like. We will use this code:
const scrapingbee = require('scrapingbee'); // Import ScrapingBee's SDK
const fs = require('fs');
async function save_html_content(url, path) {
var client = new scrapingbee.ScrapingBeeClient('YOUR-API-KEY'); // New ScrapingBee client
var response = await client.get({
url: url,
params: { // No parameters to use
}
}).then((response)=>fs.writeFileSync(path, response.data)) // Save the contents to the 'path' file destination
.catch((e)=>console.log("An error has occured: " + e.message))
}
save_html_content("https://demo.scrapingbee.com/infinite_scroll.html", "file.html");
And the result as you will see below the first 9 pre-loaded blocks.So for websites that have infinite scroll, you will not be able to extract information efficiently without scroll_y.
The code below will scroll to the end of the page and wait for 500 milliseconds two times, then save the result in an HTML document.
const scrapingbee = require('scrapingbee'); // Import ScrapingBee's SDK
const fs = require('fs');
async function save_html_content(url, path) {
var client = new scrapingbee.ScrapingBeeClient('YOUR-API-KEY'); // New ScrapingBee client
var response = await client.get({
url: url,
params: {
'js_scenario': {"instructions": [ // Using a JavaScript Scenario
{"scroll_y": 1080}, // Scroll to the bottom of the page [Default window height is 1080 pixels in ScrapingBee]
{"wait": 500}, // Wait for half a second
{"scroll_y": 1080}, // Scroll to the bottom of the page
{"wait": 500} // Wait for another half a second
]}
}
}).then((response)=>fs.writeFileSync(path, response.data)) // Save the contents to the 'path' file destination
.catch((e)=>console.log("An error has occured: " + e.message))
}
save_html_content("https://demo.scrapingbee.com/infinite_scroll.html", "file.html");
And as you can see below, we managed to scrape 18 blocks. We can even go further and scrape more blocks if wanted by adding more scroll_y instructions.
