ScrollTimeline 的 axis 参数仅接受 "block" 或 "inline"，不支持 "x"/"y"或"horizontal"/"vertical"；它依据 writing-mode 和 direction 决定逻辑滚动轴，而非物理方向，axis: "block" 对应块轴（默认垂直），axis: "inline" 对应内联轴（默认水平），需配合 overflow-x/auto 和 writing-mode: horizontal-tb 确保水平滚动生效。
ScrollTimeline 的 axis 参数只接受 "block" 或 "inline"，不支持 "x"/"y"
这是最容易踩的坑：很多人直接写 axis: "y" 或 axis: "horizontal"，结果 Timeline 完全不触发——因为 CSS Scroll-Driven Animations 规范**根本没定义这些值**。axis 不是描述物理方向，而是描述文档流中的逻辑方向，取决于容器的 writing-mode 和 direction。
实际绑定水平/垂直滚动，靠的是：
-
axis: "block"→ 绑定到块级方向滚动（默认为垂直，如writing-mode: horizontal-tb时） -
axis: "inline"→ 绑定到内联方向滚动（默认为水平，如writing-mode: horizontal-tb时）
如何让 axis: "inline" 真正绑定水平滚动
必须确保目标滚动容器的文本流方向支持内联轴为水平方向。绝大多数页面默认满足，但需显式确认：
- 滚动容器（如
<div class="scroller">）需设置 <code>overflow-x: auto（且内容足够宽触发水平滚动） - 容器不能有
writing-mode: vertical-lr或vertical-rl（否则inline轴会变成垂直） - 推荐显式声明
writing-mode: horizontal-tb消除歧义 - 示例创建方式：
const scrollTimeline = new ScrollTimeline({<br> source: document.querySelector('.scroller'),<br> axis: 'inline',<br> orientation: 'forward'<br>}); - 即使设
orientation: "forward"，若容器是writing-mode: vertical-lr，axis: "inline"仍会响应**垂直滚动** - 调试时可临时加
console.log(scrollTimeline.currentTime)验证是否随预期方向变化 - 不要依赖浏览器 DevTools 的 “Scroll timeline” 面板显示的箭头方向——它有时会误判
writing-mode影响 - 用
'scrollTimeline' in CSS或typeof ScrollTimeline !== 'undefined'判断 -
axis选项在不支持时会被静默忽略，动画退化为普通animation，不会报错 - 若需水平滚动动画兼容旧浏览器，只能回退到
IntersectionObserver+ 手动计算getBoundingClientRect().left模拟，无法精确对齐滚动位置
为什么不用 orientation 判断方向
orientation（可选 "forward"/"reverse"）只影响时间进度正负，**不影响滚动轴选择**。它只是说“向下/向右滚动时进度增加”，但轴本身仍由 axis + 容器流决定。
立即学习“前端免费学习笔记（深入）”；
兼容性与 fallback 注意点
ScrollTimeline 目前仅 Chromium 115+ 原生支持（Chrome、Edge、Opera），Firefox 和 Safari 无实现计划。生产环境必须检测：
真正起作用的永远是容器的流式布局属性，而不是你希望它怎么动。别试图绕过 writing-mode 直接“指定 X/Y”。
