使用Puppeteer滚动daostar.one页面加载表格失败，求解决方法

你遇到的问题是因为目标页面的表格是Notion嵌入的，它的滚动容器不是全局的document.body，而是表格内部的独立滚动元素，所以之前的滚动代码无法触发数据加载。下面提供两种解决思路：

一、针对Notion表格的滚动加载方案 #

方法1：直接操作表格内部的滚动容器 #

Notion表格的滚动区域通常是类名为.notion-scroller.vertical的元素，嵌套在.notion-table-view-body下。修改滚动代码，针对这个元素操作：

async function autoScrollNotionTable(page) {
  await page.evaluate(async () => {
    await new Promise((resolve) => {
      const scroller = document.querySelector('.notion-table-view-body .notion-scroller.vertical');
      if (!scroller) {
        resolve();
        return;
      }
      let totalScrolled = 0;
      const distance = 200;
      const timer = setInterval(() => {
        scroller.scrollBy(0, distance);
        totalScrolled += distance;
        // 判断是否滚动到底部
        if (scroller.scrollTop >= scroller.scrollHeight - scroller.clientHeight) {
          clearInterval(timer);
          resolve();
        }
      }, 100);
    });
  });
}

// 使用时先等待滚动容器出现，再执行滚动
await page.waitForSelector('.notion-table-view-body .notion-scroller.vertical');
await autoScrollNotionTable(page);

方法2：模拟鼠标滚轮滚动容器 #

如果上面的方法仍无效，可以尝试用鼠标滚轮在滚动容器内滚动，确保鼠标定位在容器上：

// 定位到表格滚动容器
const scrollerElem = await page.$('.notion-table-view-body .notion-scroller.vertical');
if (scrollerElem) {
  const box = await scrollerElem.boundingBox();
  // 移动鼠标到容器中心
  await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
  
  let prevScrollHeight = 0;
  // 循环滚动直到没有新数据加载
  while (true) {
    await page.mouse.wheel({ deltaY: 500 });
    await page.waitForTimeout(200); // 等待数据加载
    
    const currentScrollHeight = await page.evaluate(el => el.scrollHeight, scrollerElem);
    const currentScrollTop = await page.evaluate(el => el.scrollTop, scrollerElem);
    
    // 判断是否到底且没有新数据
    if (currentScrollTop >= currentScrollHeight - box.height && currentScrollHeight === prevScrollHeight) {
      break;
    }
    prevScrollHeight = currentScrollHeight;
  }
}

二、无需滚动直接获取完整数据的方案 #

1. 抓取Notion的API请求 #

Notion嵌入页面的数据是通过官方API获取的，你可以直接模拟这个请求拿到完整数据：

• 打开目标页面的开发者工具（F12），切换到Network标签，过滤XHR请求
• 找到loadPageChunk的POST请求，复制请求头（包括Cookie、User-Agent等）和请求体参数
• 在Puppeteer中发送这个请求，解析返回的JSON提取表格内容

示例代码（需替换实际参数）：

const apiResponse = await page.request.post('https://www.notion.so/api/v3/loadPageChunk', {
  headers: {
    'Content-Type': 'application/json',
    // 粘贴浏览器中复制的Cookie、User-Agent等请求头
  },
  body: JSON.stringify({
    // 粘贴请求体中的pageId、chunkNumber等参数
  })
});
const data = await apiResponse.json();
// 解析data中的表格数据结构，提取所需的成员信息

2. 提取页面全局数据 #

部分Notion嵌入页面会把完整数据存在全局对象中，你可以尝试在页面上下文里提取：

const tableData = await page.evaluate(() => {
  // 调试时可以在浏览器控制台输入window.notion查看数据结构
  if (window.notion?.pageData) {
    // 根据实际数据路径提取表格内容
    return window.notion.pageData;
  }
  return null;
});

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