通过使用木偶页面的侧边栏滚动

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