如何使用 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:0xed!23384d.24b!2348d.2384d.2082384d. 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);