90%的滚动卡顿源于动画干扰滚动合成层调度：动画元素与滚动容器存在层级耦合时，会引发图层合并失败或强制同步合成，导致滚动被迫回退到主线程重排重绘；需通过layer borders验证独立合成层、隔离动画变量、清除will-change并避免filter/overflow等阻断提层的样式。
页面滚动卡顿和CSS动画共存时，90%的情况不是动画本身慢，而是动画干扰了滚动的合成层调度——浏览器把本该独立运行的滚动线程，拖进了主线程重排重绘的泥潭。
transform 和 opacity 动画为何会破坏滚动流畅性
看似只动 transform 和 opacity 是安全的，但一旦这些动画元素与滚动容器存在层级或渲染上下文耦合，就可能引发图层合并失败或强制同步合成。比如：
- 滚动容器（
overflow: scroll）内部有正在播放@keyframes的元素，且该元素父级设置了filter: blur(1px)或overflow: hidden，会抑制子元素提层，导致整个滚动区域被迫回退到 CPU 渲染 - 动画元素使用了
will-change: transform但未清除，长期占用 GPU 内存；中低端安卓机图层数超限后，合成器会降级处理，连带拖慢滚动帧率 - 动画过程中 JS 频繁调用
getBoundingClientRect()或offsetHeight，哪怕只在requestAnimationFrame里读一次，也会触发强制同步 layout，直接打断滚动流水线
滚动卡顿的真实诱因常被误判为“没开硬件加速”
写了 transform: translateZ(0)、加了 will-change: transform，不代表滚动就变顺了。关键要看是否真建了独立合成层：
- Chrome DevTools → Rendering → 勾选 “Layer Borders”：滚动时绿色边框必须稳定覆盖滚动容器本身，而不是只出现在动画元素上
- 如果滚动容器没绿框，检查它是否被父级的
transform、opacity、filter或mask包裹——这些会创建新的 stacking context，阻断图层提升 -
contain: strict能隔离滚动容器的渲染作用域，但若容器内有position: fixed子元素，contain 会失效，反而加剧重绘
如何验证并切断动画对滚动的干扰
最有效的排查方式是「隔离变量」，而不是改代码猜原因：
- 临时禁用所有 CSS 动画：在 DevTools 中右键动画元素 → “Delete element”，观察滚动是否恢复流畅；若恢复，说明问题出在动画渲染路径上
- 用 Performance 面板录制滚动过程，重点看 “Update Layer Tree” 和 “Paint” 是否在动画帧期间陡增；若陡增，说明动画触发了非预期的布局或绘制
- 给滚动容器单独加
will-change: scroll-position是无效的（Chrome 已弃用），真正起作用的是will-change: transform+ 确保其不被父级样式压制 - 动画结束必须清除
will-change：监听animationend，同时加setTimeout(..., duration + 100)兜底，iOS Safari 对短于 16ms 的动画可能不触发该事件
真正难处理的点不在“怎么加加速”，而在“怎么让动画和滚动互不看见”——它们本该跑在不同线程，一旦样式或 DOM 结构让浏览器判定需要协同更新，60fps 就立刻崩掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
