Question

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

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

如何使用Puppeteer在div中滚动？

1 个答案: