如何使用Playwright实现CRM网页自动滚动到底部？求代码示例

下面给你几种实用的实现方式，根据你的CRM页面特性选择：

方法1：直接滚动到页面底部（原生JS方式） #

通过page.evaluate执行浏览器原生JS，直接滚动到页面最大高度，适合内容一次性加载完成的场景：

// 滚动到页面底部
await page.evaluate(() => {
  window.scrollTo({
    top: document.body.scrollHeight,
    behavior: 'smooth' // 可选，开启平滑滚动；需要瞬间滚动可删除此行
  });
});

// 若页面滚动容器不是body（比如带滚动条的特定div），替换为对应选择器即可
// await page.evaluate(() => {
//   const container = document.querySelector('#target-scroll-container');
//   container.scrollTo({ top: container.scrollHeight, behavior: 'smooth' });
// });

方法2：模拟鼠标滚轮滚动（适配懒加载场景） #

如果你的CRM页面是懒加载模式（滚动到底部才加载新内容），可以重复模拟滚轮滚动，直到无法加载更多内容：

async function scrollToBottom(page) {
  let previousHeight;
  do {
    previousHeight = await page.evaluate(() => document.body.scrollHeight);
    await page.mouse.wheel(0, 1000); // 每次向下滚动1000像素
    await page.waitForTimeout(500); // 等待内容加载，时长根据页面加载速度调整
  } while (await page.evaluate(() => document.body.scrollHeight) > previousHeight);
}

// 调用滚动方法
await scrollToBottom(page);

方法3：结合你的缩放代码使用 #

如果你已经设置了页面缩放，可以将缩放与滚动逻辑结合，确保滚动到缩放后的页面底部：

// 先设置页面缩放
await page.evaluate(() => document.body.style.zoom = 0.5 );
// 再滚动到底部
await page.evaluate(() => {
  window.scrollTo({
    top: document.body.scrollHeight,
    behavior: 'instant'
  });
});

注意事项 #

• 若页面的滚动容器不是body，一定要找到对应的元素选择器，替换代码中的容器对象；
• 懒加载场景下，waitForTimeout的等待时长需要根据页面实际加载速度调整，避免滚动过快导致内容未加载完全。

内容的提问来源于stack exchange，提问作者Muzaffar Ur Rahman