I try to scroll area inside div using Puppeteer.
I tried to follow these answers: https://stackoverflow.com/a/67490337 and https://stackoverflow.com/a/52031392 but it didn't work.
Page I try to scroll - https://yandex.ru/profile/1899402108
My code looks like this:
const scrollable_section = '.business-tab-wrapper__content';
await this.page.waitForSelector('.business-reviews-card-view__review');
await this.page.evaluate(selector => {
const scrollableSection = document.querySelector(selector);
scrollableSection.scrollTop = scrollableSection.offsetHeight;
}, scrollable_section);
Previously tried this code but it didn't work too:
await this.page.evaluate(async () => {
await new Promise(resolve => {
let totalHeight = 0;
const distance = 100;
const timer = setInterval(() => {
const scrollHeight = document.body.scrollHeight;
window.scrollBy(0, distance);
totalHeight += distance;
if (totalHeight >= scrollHeight) {
clearInterval(timer);
resolve();
}
}, 100);
});
});
The error occurs because you did not choose the right element to scroll.
in the first example, you chose .business-tab-wrapper__content as your scrollable element, but this is not a scrollable element. If you would inspect it, you will see that its height is 0, and basically, it is a line separator (I believe that you wanted to scroll to it). in that example, you should choose .scroll__content as your scrollable_section and scroll in it to where you want (like the offsetHeight of .business-tab-wrapper__content.
in the second example you try to scroll the document's body, but again, the body itself is not scrollable.
so to sum it up - you need to select the right scrollable div and that scroll it to the offset that you'd like