如何使用 Puppeteer 在 div 内滚动？

Question

我想使用 Puppeteer 在具有滚动条但整个窗口没有滚动条的 div 内滚动。我们以以下 URL 为例：

https://www.google.com/maps/place/DO+%26+CO+Restaurant+Stephansplatz/@48.2082385,16.3693837,17z/data=!4m7!3m6!1s0x476d079f2c500731:0xed65abfb2c337243!8m2!3d48.2082385!4d16.3715725!9m1!1b1

您可以在左侧看到评论，并且整个部分都有一个滚动条。快速检查元素显示整个事物被一个 div 包围，该 div 具有以下类 widget-pane-content scrollable-y。所以，我尝试做这样的事情：

const scrollable_section = 'div.widget-pane-content.scrollable-y';
await page.evaluate((selector) => {
    const scrollableSection = document.querySelector(selector);
    scrollableSection.scrollTop = scrollableSection.offsetHeight;
}, scrollable_section);

但是，这不起作用。我还注意到单击空格按钮，如果它集中在评论部分，它也会自动向下滚动。所以，我也尝试做这样的事情：

await page.focus(scrollable_section);
await page.keyboard.press('Space');

但是，这似乎也不起作用。任何想法如何使用 Puppeteer 在 div 内滚动？

Answer 1

首先，您使用了错误的选择器，并且您在 const 声明中使用了 : 而不是 =。

这行代码实际上应该是：

const scrollable_section = '.section-listbox .section-listbox';

此外，由于此部分中的内容是动态加载的，因此您应该等待该元素包含内容，然后再尝试向下滚动：

await page.waitForSelector('.section-listbox .section-listbox > .section-listbox');

因此，您的最终代码应如下所示：

const scrollable_section = '.section-listbox .section-listbox';

await page.waitForSelector('.section-listbox .section-listbox > .section-listbox');

await page.evaluate(selector => {
  const scrollableSection = document.querySelector(selector);

  scrollableSection.scrollTop = scrollableSection.offsetHeight;
}, scrollable_section);