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

Question

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

我看到了这个solution，但我不完全知道如何获取x和y。以该文档为例，如何在侧栏的滚动视图中滚动。

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