滚动联动动效实现边界

大理论

Scroll-linked motion 有三种常见实现：CSS scroll-driven animations、JS 时间线/ScrollTrigger、平滑滚动库如 Lenis。它们解决的问题不同，也带来不同边界。CSS 适合轻量 progress/reveal，但仍有兼容性边界；GSAP 适合复杂 pin/scrub 和多段编排；Lenis 适合同步 WebGL/视差和品牌沉浸，但会改变原生滚动手感。

小知识点

1. 首先判断是否需要滚动动效：阅读进度、章节揭示、产品状态因果或空间映射可以成立；普通列表/表单/后台工具通常不需要 smooth scroll。
2. CSS animation-timeline、scroll()、view timeline 可减少 JS scroll listener，但 scroll() 等能力仍需查 Baseline/兼容性并提供 fallback。
3. Pin/scrub 区块必须短、可跳过、内容完整；不要把核心信息藏在必须精准滚动才能看到的帧里。
4. Lenis/smooth scroll 必须测试锚点链接、键盘 PageDown/Home/End、焦点滚入视图、浏览器 back/restore、sticky、嵌套滚动容器和触控惯性。
5. ScrollTrigger、Lenis、RAF 和 resize observer 都要在组件卸载时清理；布局或字体加载改变高度后需要 refresh/recalculate。
6. reduced-motion 下关闭 scrub/parallax/smooth scroll，保留静态关键帧、章节标题和正常阅读顺序。

设计判断

滚动动效健康时，用户能按自己的速度阅读，跳过动画也不丢信息；不健康时，页面变成长 pinned 轨道、滚动距离不可预测、锚点和键盘失效，或移动端滑动像被拽住。

实现建议

先写 scroll brief：目标、章节、触发元素、scroll container、技术路径、fallback、reduced-motion、anchor/keyboard、移动端、性能预算。简单进度条优先 CSS 或原生 sticky；复杂 timeline 用 GSAP/ScrollTrigger；只有在品牌叙事/WebGL 同步确实需要时才加 Lenis，并提供关闭路径。对 CSS scroll-driven animations 使用 @supports (animation-timeline: scroll()) 分层。

反例/风险

全站默认 Lenis 导致后台表格滚动异常、长 pin 区把用户困在首屏、scroll scrub 控制价格/合规信息出现顺序、移动端每个 section 都触发 parallax、浏览器返回后滚动位置错乱、reduced-motion 仍启用 smooth scroll。

案例分析

MDN 说明 CSS scroll-driven animations 让动画沿滚动 timeline 变化，而不是按默认时间轴；但 scroll() 文档也标记该能力并非 Baseline，因为部分主流浏览器不支持。Lenis 官网承认 smooth scroll 曾被质疑 hacky、inaccessible 和不 performant，并把其定位为标准化滚动体验、与 WebGL/视差同步。可学习点是：滚动动效不是默认美化，而是必须按技术边界和用户控制权谨慎选择。

来源链接

MDN CSS scroll-driven animations: https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Scroll-driven_animations MDN scroll() animation timeline: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/animation-timeline/scroll CSS Scroll-driven Animations spec: https://drafts.csswg.org/scroll-animations-1/ Lenis: https://www.lenis.dev/ Lenis GitHub: https://github.com/darkroomengineering/lenis GSAP ScrollTrigger: https://gsap.com/docs/v3/Plugins/ScrollTrigger/