Scroll inside div doesn't wrk with Puppeteer

Question

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);
  });
});

Answer 1

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