CSS变量控制动画进度_配合JS滚动监听实现滚动联动动画

最直接的联动方式是用 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 清理和初始值声明，这两处一错，整个动画就不可控。