最直接的联动方式是用 requestAnimationFrame 节流滚动监听，动态更新 CSS 变量 --scroll-progress，再通过 calc() 或 clamp() 在 CSS 中驱动动画，同时确保 will-change: transform 和初始值声明，及时清理 raf 与事件监听。
怎么用 CSS 变量把动画进度和滚动位置绑死
靠 scrollY 动态改 CSS 变量值，是最直接的联动方式。关键不是“能不能动”，而是变量更新是否及时、是否触发重绘、有没有布局抖动。
- 必须用
requestAnimationFrame节流滚动监听，否则 iOS Safari 会掉帧甚至卡死 -
document.documentElement.scrollTop比window.scrollY更稳定（尤其在有overflow: hidden的容器里） - 变量名建议带前缀，比如
--scroll-progress，避免和组件库冲突 - 别在
:root外层反复 setProperty，每次调用都可能触发样式重计算
CSS 里怎么读这个变量并驱动动画
不能直接拿 --scroll-progress 当 transform 的参数——CSS 不支持变量插值运算。得靠 calc() 或自定义属性链式传递来“解包”。
- 平移动画：用
transform: translateY(calc(var(--scroll-progress) * -100px))，注意单位要显式写 - 透明度/缩放：
opacity: clamp(0.2, var(--scroll-progress), 1)，clamp()防止超限导致突变 - 慎用
animation-timeline: scroll()—— 目前仅 Chrome 115+ 支持，且不兼容position: sticky容器 - 如果动画依赖多个滚动区间（比如 0–30% 做 A，30–70% 做 B），用
@property声明类型 +transition补间更可控
为什么滚动一卡，动画就跳变或延迟
本质是 JS 更新变量和 CSS 渲染管线不同步。常见于没做合成层隔离、或变量被用于触发 layout 的属性上。
- 确保动画元素有
will-change: transform或transform: translateZ(0)，强制 GPU 合成 - 避免把
--scroll-progress用在height、margin这类触发布局的属性上 - 如果用了
IntersectionObserver替代scroll事件，注意它的回调默认异步，比requestAnimationFrame慢一帧 - 在低端 Android 设备上，
getComputedStyle().getPropertyValue()读取变量可能阻塞主线程，尽量只写不读
JS 里怎么安全地初始化和销毁监听
滚动监听不清理，轻则内存泄漏，重则页面滚动后动画还在跑旧值。
立即学习“前端免费学习笔记（深入）”；
- 初始化时存好
rafId和scrollHandler引用，销毁时用cancelAnimationFrame(rafId) - 不要在组件卸载时只移除
addEventListener，忘了 cancel raf 就等于留了个定时器 - 如果用 React，
useEffect的 cleanup 函数里必须同时处理 raf 和 event listener - 测试时手动滚到页面顶部再刷新，看变量是否重置为 0 —— 很多 bug 出在初始值没设
:root { --scroll-progress: 0 }
滚动联动看着简单，但变量生命周期、渲染管线时机、跨浏览器行为差异全堆在边界上。最常漏的是 raf 清理和初始值声明，这两处一错，整个动画就不可控。
