如何在javascript中向下滚动列表答案

【问题标题】：how to Scroll down a list in javascript如何在javascript中向下滚动列表
【发布时间】：2020-11-18 05:16:42
【问题描述】：

所以我正在用 puppeteer 做一个项目，我有一个包含一些元素列表的 div（该列表是我 Instagram 个人资料上的关注者），我想自动向下滚动到该列表的底部JavaScript。

问题是，当我向下滚动到列表底部时，新元素不断出现。因此，例如，如果我有 200 个关注者，我必须向下滚动，直到没有新的关注者不断出现。

到目前为止我尝试过，但它没有让我到任何地方

var element = document.querySelector('.jSC57  ._6xe7A');
element.scrollTop = element.scrollHeight;

如何使用 JavaScript 编写代码？

【问题讨论】：

标签： javascript scroll puppeteer

【解决方案1】：

此功能可以满足您的需求，但对于浏览器窗口，如果不断出现的新元素增加了窗口大小，它应该对您有用

async function scrollToBottomOfWindow(page) {
        const distance = 50; // should be less than or equal to window.innerHeight
        const delay = 500; // giving delay allows new elements in the list to load
        while (await page.evaluate(() => document.scrollingElement.scrollTop + window.innerHeight < document.scrollingElement.scrollHeight)) {
          await page.evaluate((y) => { document.scrollingElement.scrollBy(0, y); }, distance);
          await page.waitFor(delay);
        }
}

相反，如果新出现的元素没有增加窗口大小，只是元素的内部高度，这个应该可以解决您的问题

async function scrollToBottomOfElement(page, element) {
    const distance = 50;
    const delay = 500;
    while (await page.evaluate(() => element.scrollTop < element.scrollHeight)) {
      await page.evaluate((y) => { element.scrollingElement.scrollBy(0, y); }, distance);
      await page.waitFor(delay);
    }
}

【讨论】：

新元素不会增加窗口大小，也不会增加元素内部高度。当您向下滚动时，新元素不断出现，唯一增加的是滚动条。