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

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

Scroll through the side bar of a page using Puppeteer

javascript

web-crawler

node.js

puppeteer