scroll()函数仅在chromium浏览器中可用，需配合@property和scroll-timeline使用，用于将滚动距离映射为0%→100%动画时间轴，不可直接作缓动函数；必须显式绑定animation-timeline，且滚动容器须为祖先元素并具滚动行为。
scroll() 函数目前（截至 Chrome 125、Safari 17.4、Firefox 尚未支持）仅在 Chromium 系列浏览器中可用，且必须配合 @property 和 scroll-timeline 使用，不能直接写在 animation-timing-function 或 transform 中作为普通函数调用。
scroll() 函数只能用于 animation-timeline 的 timeline-range
很多人误以为 scroll() 是类似 ease() 的缓动函数，实际它只在定义滚动时间轴范围时起作用，语法是 scroll(inline, start end) 或 scroll(block, start end)。它的作用是把容器的滚动距离映射为 0% → 100% 的动画时间轴。
-
inline对应水平滚动（如direction: rtl或writing-mode: vertical-rl），多数场景用block -
start和end是触发点，接受nearest、nearest-x、nearest-y或具体长度（如100px），默认单位是视口内偏移 - 若容器未设置
overflow: auto或未发生滚动，时间轴不会激活，动画将卡在初始状态
必须搭配 @property 声明自定义动画属性
要让动画进度随滚动实时变化，CSS 动画本身得能响应滚动位置——但原生 CSS 没有“滚动百分比变量”。所以必须用 @property 定义一个可动画的数字属性，并在 @keyframes 中驱动它。
- 声明需指定
syntax: "<number>"</number>和inherits: false，否则无法参与动画插值 - 该属性必须绑定到被动画的元素上，且不能是伪元素（
::before等不支持@property绑定） - 示例声明：
@property --progress { syntax: "<number>"; inherits: false; initial-value: 0; }</number>
scroll-timeline 必须显式挂载到 animation 上
光有 @property 和 @keyframes 不够，动画必须通过 animation-timeline 关联滚动时间轴，否则仍按常规时间播放。
- 写法是
animation-timeline: my-timeline;，其中my-timeline是用@scroll-timeline定义的名称 -
@scroll-timeline必须指定source（滚动容器）、orientation（方向）、start/end（范围），三者缺一不可 - 常见错误：忘记给滚动容器设
contain: paint，导致 Safari/Chrome 在某些复合层场景下时间轴失效 - 兼容性兜底建议：用
@supports (animation-timeline: none)包裹整套逻辑，避免不支持浏览器解析失败
滚动容器和目标元素的 DOM 关系很关键
scroll-timeline 的 source 必须是目标元素的**祖先元素**（可以是 body），且该祖先必须有滚动行为。如果目标元素被包裹在多个嵌套 overflow 容器中，必须明确指定最内层那个作为 source。
- 若用
source: selector(#scroller)，确保该元素存在且已渲染完成（JS 动态插入后需手动触发重绘） - 不要在
display: none或opacity: 0的父容器里启动滚动动画——时间轴不会计算 - 移动端 WebKit（Safari iOS）对
scroll-timeline的source有更严格限制：不支持body以外的html元素，也不支持position: fixed容器
真正难的不是写几行 CSS，而是理解 scroll-driven animation 是一套“声明式时间轴系统”，不是“滚动时执行某段代码”。一旦容器结构微调、滚动方向变化、或浏览器版本更新，scroll() 的行为可能静默失效——务必在真实设备上逐帧检查滚动锚点是否对齐。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
