这个效果是怎么做出来的
和「滚到这里播一段动画」完全是两回事。普通滚动动画是事件驱动：滚过某条线，动画自己放自己的，用户停不住也倒不回。滚动驱动是状态驱动：把动画进度定义成滚动位置的纯函数——进度 p 等于 scrollTop 除以可滚动高度，每一帧圆点的位置、进度条的高度、颜色都由 p 算出来。滚动倒着走，动画就倒着放；滚动停在哪，动画就冻在哪一帧。因为一切都是同一公式的输出，可逆性和暂停感是天然具备的，根本不用写「倒放」逻辑。
实现上监听 scroll 事件（passive），读位置、归一化、写 transform；右侧进度条用 scaleY、轨道圆点用 translateX，颜色用 hsl 色相随 p 旋转，全程合成器友好。现代浏览器还有更优雅的原生方案：CSS scroll-driven animations（animation-timeline: scroll()），把绑定关系写在纯 CSS 里，JS 一行不用；demo 用 JS 是为了兼容所有浏览器，两者视觉一致。
怎么用这条提示词
适合长页面的进度叙事：官网首页的章节推进、产品特性的逐段点亮、阅读进度指示。发给 AI 时说明哪些视觉元素要绑定进度（进度条、视差图、数字），它会生成映射函数。想用原生 CSS 方案就补一句「优先用 animation-timeline，不支持再降级 JS」。
想效果更好？试试这些
映射别用线性直给，套一个 easeOut 做视觉缓动——滚动是匀速的但动画显得有加速度，高级感立现。iOS 橡皮筋滚动会产生负的 scrollTop，记得把 p 钳制在 0 到 1，否则圆点会滑出轨道。resize 后要重算可滚动高度，绑定在 ResizeObserver 上最稳。绑定元素一多（几十个跟随者）就把它们挂到同一个 rAF 循环里统一写值，别各自监听 scroll，事件回调次数直接少一个量级。