Chrome无头浏览器Puppeteer：使截图呈现滚动条

Question

使用 Chrome Headless Puppeteer 截取网页截图时，滚动条似乎从未被呈现。

复制方法如下：

1. 前往官方演示页面：https://try-puppeteer.appspot.com/

2. 将 page.goto('https://example.com') 更改为 'https://backbonejs.org/'。

3. 截取一张屏幕截图

4. 导航菜单中的滚动条（位于左侧）未被呈现。

有没有办法打开它？

- Lee Le

---

你的电脑/服务器上是否产生了相同的结果？ - Md. Abu Taher

Answer 1

我遇到了同样的问题：我们的CI在无头模式下出现了渲染不出滚动条的问题。经过一番探索，我在puppeteer的Github存储库中发现了以下问题。

无头模式不应强制使用--hide-scrollbars

确保滚动条在我们的CI上和本地都能正常显示的快速解决方案是，在puppeteer的启动配置中显式忽略--hide-scrollbars参数：

this.browser = await puppeteer.launch({
  // Existing config goes here...
  ignoreDefaultArgs: ["--hide-scrollbars"]
});

- Emile Bergeron

Answer 2

看起来该网站根据视口和其他因素切换滚动条开/关。如果您通过DevTools模拟某些设备，您会发现滚动条消失了。此外，在headful puppeteer模式下它们是存在的。

- vsemozhebuty