使用 Puppeteer 滚动浏览页面的侧边栏答案

【问题标题】：Scroll through the side bar of a page using Puppeteer使用 Puppeteer 滚动浏览页面的侧边栏
【发布时间】：2019-06-30 00:37:52
【问题描述】：

如何只滚动页面的侧边栏而不是整个页面？

我看到了这个solution，但我不知道如何获得 x 和 y。以本文档为例，如何滚动浏览侧边栏的滚动视图。

【问题讨论】：

标签： javascript node.js web-crawler puppeteer

【解决方案1】：

有一些方法可以将此部分滚动到底部：

'use strict';


const puppeteer = require('puppeteer');

(async function main() {
  try {
    const browser = await puppeteer.launch({
      headless: false,
      args: ['--start-maximized'],
    });
    const [page] = await browser.pages();
    await page.setViewport({ width: 1280, height: 600 });

    await page.goto('https://nodejs.org/api/');
    await page.evaluate(() => {
      const container = document.querySelector('#column2');
      container.scrollTop = container.scrollHeight;
    });

    await page.waitFor(3000);

    await page.goto('https://nodejs.org/api/');
    await page.evaluate(() => {
      const container = document.querySelector('#column2');
      container.scroll(0, container.scrollHeight);
    });

    await page.waitFor(3000);

    await page.goto('https://nodejs.org/api/');
    await page.evaluate(() => {
      const container = document.querySelector('#column2');
      container.scrollBy(0, container.scrollHeight);
    });

    await page.waitFor(3000);

    await page.goto('https://nodejs.org/api/');
    await page.evaluate(() => {
      const container = document.querySelector('#column2');
      container.scrollTo(0, container.scrollHeight);
    });

    await page.waitFor(3000);

    await page.goto('https://nodejs.org/api/');
    await page.evaluate(() => {
      const lastElementInContainer = [...document.querySelectorAll('#column2 li')].pop();
      lastElementInContainer.scrollIntoView();
    });
  } catch (err) {
    console.error(err);
  }
})();

【讨论】：

scroll,scrollBy,scrollTo有什么区别。我只是在浏览文档，我真的什么都没看到？ developer.mozilla.org/en-US/docs/Web/API/ScrollToOptions
还有你为什么要在每个选项之后等待，代码是否预计会继续，或者你试图展示解决任务的不同方法？
是的，等待只是为了说明不同方式的效果。 scrollBy() 相对使用选项（从当前位置滚动一定量），scroll() 和 scrollTo() have the same effect 并绝对使用选项（从任何位置滚动到绝对坐标）。