Headful模式下Puppeteer如何实现页面可滚动？

我完全懂你遇到的麻烦——在Headful模式下跑Puppeteer时，明明需要手动介入操作，却没法滚动窗口，连滚动条都不显示，不同分辨率的屏幕还会让这个问题更突出。咱们来一步步搞定它：

问题核心原因 #

你之前尝试的defaultViewport: null思路是对的，但如果同时调用了page.setViewport()，就会直接覆盖这个设置，把页面视口和窗口尺寸牢牢绑定死，自然没法触发滚动条。另外，Puppeteer默认的窗口行为也可能限制了滚动条的正常显示。

可行解决方案 #

方案1：禁用默认视口+指定初始窗口尺寸 #

启动浏览器时，同时配置defaultViewport: null和--window-size参数，绝对不要调用page.setViewport()，这样浏览器窗口就会像普通Chrome一样支持自由调整，页面内容超出窗口时自动弹出滚动条：

const puppeteer = require('puppeteer');

puppeteer.launch({
  headless: false,
  defaultViewport: null, // 让浏览器自主管理视口，不固定尺寸
  args: ['--window-size=1300,800'] // 设置窗口初始宽高
}).then(async browser => {
  const page = await browser.newPage();
  await page.goto('https://google.com');
  await page.waitFor(60000);
  await browser.close();
});

方案2：强制页面显示滚动条（针对特殊页面） #

如果个别页面通过CSS（比如overflow: hidden）主动隐藏了滚动条，你可以手动注入CSS强制恢复：

const puppeteer = require('puppeteer');

puppeteer.launch({
  headless: false,
  defaultViewport: null
}).then(async browser => {
  const page = await browser.newPage();
  // 注入样式强制显示滚动条
  await page.addStyleTag({
    content: `
      body, html {
        overflow: auto !important;
      }
    `
  });
  await page.goto('https://google.com');
  await page.waitFor(60000);
  await browser.close();
});

方案3：补充窗口属性参数（适配特殊环境） #

如果前两种方法还没效果，可以添加额外启动参数，确保浏览器窗口的可调整和滚动权限：

const puppeteer = require('puppeteer');

puppeteer.launch({
  headless: false,
  defaultViewport: null,
  args: [
    '--window-size=1300,800',
    '--no-sandbox' // Linux等环境可能需要这个参数解除沙箱限制
  ]
}).then(async browser => {
  const page = await browser.newPage();
  await page.goto('https://google.com');
  await page.waitFor(60000);
  await browser.close();
});

关键注意事项 #

• 绝对不要同时使用defaultViewport: null和page.setViewport()，两者会直接冲突，导致视口被固定死，无法触发滚动条。
• 手动缩小窗口后，要确认页面内容高度确实超过了窗口高度（比如Google页面缩小后，搜索结果会换行增高，这时滚动条就会正常出现）。

内容的提问来源于stack exchange，提问作者squirtgun