使用Puppeteer全屏截图时Sticky Navbar错位至中部的修复方案

问题描述 #

使用Puppeteer生成网站全屏截图时，本该固定在顶部的Sticky Navbar出现在截图中部，位置偏离。尝试过指定导航栏类名固定位置但未成功，目前只能隐藏导航栏，希望保留它在顶部的正确位置。

代码片段 #

const puppeteer = require('puppeteer');

async function takeFullPageScreenshot(url, outputPath) {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();

    await page.setViewport({ width: 1920, height: 1080, deviceScaleFactor: 2 });
    await page.goto(url, { waitUntil: 'networkidle2' });

    await incrementalScroll(page);

    await hideNavbar(page);

    await page.screenshot({ path: outputPath, fullPage: true });

    await browser.close();
    console.log(`Screenshot saved to ${outputPath}`);
}

async function incrementalScroll(page) {
    const scrollStep = 500;
    const scrollDelay = 100; 

    await page.evaluate(async (step, delay) => {
        const getScrollHeight = () => document.body.scrollHeight;
        let currentPosition = 0;

        while (currentPosition < getScrollHeight()) {
            window.scrollBy(0, step);
            currentPosition += step;
            await new Promise(resolve => setTimeout(resolve, delay));
        }
    }, scrollStep, scrollDelay);

    await page.evaluate(() => window.scrollTo(0, 0));
}

async function hideNavbar(page) {
    await page.evaluate(() => {
        const navbar = document.querySelector('.navbar.fixed-top');
        if (navbar) {
            navbar.style.display = 'none'; 
        }
    });
}

takeFullPageScreenshot('https://hunter-ed.com', 'hq-screenshot.png');

当前输出 #

固定导航栏在截图中部可见。

期望输出 #

全屏截图中固定导航栏位于顶部，无错位情况。

修复方案 #

方案1：修正滚动后的等待逻辑 #

手动滚动加载内容后，回到顶部时导航栏的定位状态可能未及时恢复，增加等待时间确保状态稳定：

async function incrementalScroll(page) {
    const scrollStep = 500;
    const scrollDelay = 100; 

    await page.evaluate(async (step, delay) => {
        const getScrollHeight = () => document.body.scrollHeight;
        let currentPosition = 0;

        while (currentPosition < getScrollHeight()) {
            window.scrollBy(0, step);
            currentPosition += step;
            await new Promise(resolve => setTimeout(resolve, delay));
        }
    }, scrollStep, scrollDelay);

    await page.evaluate(() => window.scrollTo(0, 0));
    await page.waitForTimeout(500); // 新增：等待导航栏状态恢复
}

方案2：强制锁定导航栏定位样式 #

直接给导航栏设置高优先级的固定定位样式，覆盖页面动态修改：

// 替换原hideNavbar函数
async function fixNavbar(page) {
    await page.evaluate(() => {
        const navbar = document.querySelector('.navbar.fixed-top');
        if (navbar) {
            navbar.style.position = 'fixed !important';
            navbar.style.top = '0 !important';
            navbar.style.left = '0 !important';
            navbar.style.right = '0 !important';
            navbar.style.zIndex = '9999 !important';
        }
    });
}

// 在主函数中调用fixNavbar替代hideNavbar
await fixNavbar(page);

方案3：禁用页面滚动事件监听 #

部分网站会通过滚动事件动态修改导航栏状态，直接移除相关监听并重置样式：

await page.evaluate(() => {
    // 移除全局滚动事件监听
    const originalAddEventListener = window.addEventListener;
    window.addEventListener = (type) => {
        if (type !== 'scroll') originalAddEventListener.apply(this, arguments);
    };

    // 重置导航栏样式
    const navbar = document.querySelector('.navbar.fixed-top');
    if (navbar) {
        navbar.style.cssText = 'position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; z-index: 9999 !important;';
    }
});

方案4：等待导航栏位置稳定后再截图 #

通过等待函数确认导航栏已回到顶部再执行截图：

// 在截图前添加
await page.waitForFunction(() => {
    const navbar = document.querySelector('.navbar.fixed-top');
    if (!navbar) return true;
    return window.getComputedStyle(navbar).top === '0px';
});

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