先找出原因
| 你看到的现象 | 可能的原因 |
|---|---|
| 页面一阵一阵地动，中间有细小的停顿 | 有段落感的鼠标滚轮，浏览器按一格一格来做平滑 |
| 速度时快时慢，始终不稳 | 触控板一甩之后的惯性滑动 |
| 屏幕上很顺，到了文件或剪辑软件里却卡 | 录的是可变帧率 |
| 快速滚动时出现有规律的抖动 | 每秒帧数太少，或者与显示器刷新率不匹配 |
| 卡住一下，然后往前一跳 | 页面或电脑在掉帧：懒加载的图片、繁重的脚本、编码器吃不消 |
滚动录屏一顿一顿的，通常有五个原因：有段落感的鼠标滚轮让页面一格一格地动；录屏软件写出的是可变帧率；帧率太低，撑不住持续的运动；显示器的刷新率和录制帧率不一致；页面太重，跟不上。用脚本代替滚轮来滚动，以恒定 60 fps 录制，并提前把页面加载好。或者直接从网址生成视频，那样每一帧都是算出来的，一帧也不会掉。
1. 鼠标滚轮是一格一格动的
普通鼠标滚轮转动时是一格一格的，每一格都让页面移动固定的距离。浏览器会用一小段动画把每一格平滑掉，于是连续转动滚轮，就变成了一串小小的“加速再停下”。在屏幕上，眼睛不会计较。可放进视频、在大屏上回放，看起来就是卡顿。
- 最好的办法： 别用滚轮。让脚本以设定的速度滚动页面；自动滚动指南里有一段可以直接复制。
- 如果非得手动滚： 无极滚轮，或者在触控板上稳稳地慢慢拖，都比有段落感的滚轮强，但没有哪只手能把一个速度保持二十秒。
2. 录屏软件写出的是可变帧率
很多系统自带的录屏工具，包括 macOS 截图工具栏和 QuickTime，只在屏幕内容变化时才写入一帧。这样省空间，但帧与帧之间的间隔不固定，而剪辑软件和部分播放器处理不好这种情况：为了套进固定的时间轴，帧会被复制或丢弃，滚动就抖了。
- 用能写出恒定帧率的工具录制，比如 OBS Studio，设为 60 fps。
- 如果手上已经是可变帧率的文件，剪辑前先把它转成恒定帧率。HandBrake 的“Constant Framerate”（恒定帧率）选项就能做到。
3. 帧数不够，撑不住持续运动
滚动时，每一帧里的每一个像素都在动。30 fps 下每一帧跳的距离是 60 fps 的两倍，在文字多的页面上，眼睛能看出这种跳动。24 fps 是电影的帧率，适合电影；可对于以任何速度滚动的页面，它是三者中最不顺滑的。
当运动本身就是重点时，以 60 fps 录制和导出。只有为了更小的文件才降到 30，而且降了就把滚动放慢。多数工具都把 GIF 的帧率限制得很低，所以 GIF 里的滚动要短、要缓。
4. 显示器和录制对不上
如果显示器的刷新率是 120 或 144 Hz，而你以 60 fps 录制，录屏软件大约每两帧才留下一帧；在可变刷新率的显示器上，连这个间隔都不均匀。录制时把显示器设为 60 Hz，录屏软件就能一帧对一帧。在带 ProMotion 的 Mac 上，这个设置在“显示器”里的“刷新率”。
5. 页面跟不上
- 懒加载的图片在滚进视野的那一刻才开始解码，这部分工作会抢走帧。录制前先滚到底再滚回来，让所有内容都加载好。
- 带有大量滚动联动脚本、视频背景或 WebGL 效果的页面，会让电脑满负荷运转。关掉其他应用和浏览器标签页。
- 边录边编码，会和页面争抢 CPU。录屏软件如果有硬件编码器，就用它。
一次解决全部五个问题
上面每一个原因，都来自在真实屏幕上实时采集运动。渲染器两样都不做。Website Scroll Video 读取一次页面，等图片和字体加载完，再计算页面在每一帧应在的位置并把它画出来。没有一格一格的滚轮，没有要匹配的刷新率，也没有哪一帧会赶不上时限，所以无论页面多长、多重，输出都锁定在 24、30 或 60 fps。
拿你自己的网站试试
粘贴一个链接，免费预览滚动效果。注册即送 51 个免费点数，无需信用卡，导出的任何视频都没有水印。
为什么我录的滚动画面一卡一卡的？
通常是因为鼠标滚轮让页面一格一格地动，或者录屏软件写出的是可变帧率。用脚本来滚动，以恒定 60 fps 录制；或者干脆不录，直接从网址生成视频。
网站滚动视频用 30 fps 够吗？
滚得慢、想要文件小的时候够用。只要滚得快一点，60 fps 就明显更顺，因为每一帧页面只移动一半的距离。
可变帧率的录屏怎么修？
剪辑前把它重新编码成恒定帧率，比如用 HandBrake 的 Constant Framerate（恒定帧率）设置；或者用 OBS 这类能写出恒定帧率的工具重录。
