滚动截图

滚动截图会在滚动过程中截取超出可见屏幕的内容，再把多个画面拼成一张长图。

Related workflow terms: 全页截图, 视口截图.

滚动截图与整页截图

这两个词关系密切，但描述的内容不同。滚动截图指截取方式：工具滚动浏览内容，截取每个可见画面，再把它们拼接起来。整页截图指最终结果：一张从上到下包含整个页面的图像。

整页截图可以通过滚动和拼接生成，也可以由浏览器引擎直接渲染整个页面，无需滚动。滚动截图则一定会经过滚动和拼接过程。

滚动截图的应用场景

只要内容超出单个屏幕，就可能用到滚动截图：

• 长网页——截取需要滚动才能完整查看的着陆页、文章或仪表盘。
• 移动应用——截取手机和平板电脑中可滚动的信息流、设置面板或聊天串。
• 桌面应用——截取超出可见窗口的电子表格、文档或界面。
• 问题报告——完整保留跨越多个屏幕的问题背景。
• 设计评审——用一个文件记录可滚动界面的完整布局。

滚动截图如何工作

基本过程是滚动一部分页面、截取可见内容，再继续滚动和截图，最后把各个画面拼成一张连续图像。多数工具会完全自动完成这些步骤：用户触发一次，工具负责滚动和组合。

难点在于准确性。吸顶页眉、悬浮元素、动画和懒加载内容都会干扰拼接。功能更完整的工具可以自动检测并处理这些情况。有些自动截图工具会直接通过无头浏览器渲染整个页面，完全跳过拼接，得到没有滚动痕迹的干净整页图。

滚动截图的常见错误

• 忽略吸顶页眉和页脚。 如果工具无法在不同画面间检测并移除这些元素，它们可能在拼接结果中重复出现。
• 内容尚未加载就开始截图。 工具滚动得太快时，懒加载图像或动态渲染部分可能显示为空白。
• 已有原生整页截图，却仍使用滚动截图。 浏览器开发者工具和无头浏览器可以直接渲染整页，完全避免拼接痕迹。
• 认为结果一定能达到像素级精准。 滚动截图依赖操作时机和渲染状态。动画、悬停状态或在各个画面之间变化的内容，都可能造成不一致。