CSS view-timeline-axis 怎样选择纵向和横向滚动轴

view-timeline-axis 不是“动画向左还是向右”的开关，而是视图进度时间线沿哪个滚动轴推进。普通纵向页面优先用默认的 block；横向滚动列表通常用 inline；只有你明确要绑定物理方向时，才使用 x 或 y。

选择值之前先确认三件事：被观察的 subject 位于哪个 scroller 中、该容器是否真的沿目标轴溢出，以及项目是否需要兼容不支持滚动驱动动画的浏览器。下面按这个顺序拆开。

先把轴向和滚动对象对应起来

视图进度时间线观察的是元素进入、经过和离开滚动容器的可视区域。view-timeline-axis 写在被观察的 subject 上，view-timeline-name 给这条时间线命名，动画目标再通过 animation-timeline 引用它。示例只展示静态 CSS 关系，不代表浏览器运行输出。

.scroller {
  /* 容器必须允许沿目标方向滚动 */
  overflow: auto;
}

.subject {
  /* 给被观察元素建立一条可引用的视图时间线 */
  view-timeline-name: --subject-reveal;
  /* block 是默认逻辑轴，适合常见纵向文档 */
  view-timeline-axis: block;
  /* 将同名时间线交给当前元素的动画使用 */
  animation-timeline: --subject-reveal;
  animation-name: reveal;
  animation-duration: 1ms;
  animation-fill-mode: both;
}

@keyframes reveal {
  /* 关键帧只说明动画定义，不伪造实际运行结果 */
  from { opacity: 0; }
  to { opacity: 1; }
}

这里的重点是归属关系：滚动容器提供可观察的滚动上下文，subject 声明轴向和时间线名称，动画通过名称读取视图进度。把 view-timeline-axis 误写到普通父级，或只写动画却没有对应的命名时间线，都会让排查方向跑偏。

纵向页面用 block，横向列表用 inline

block 和 inline 是逻辑轴，会跟随书写模式；x 和 y 是物理轴。中文横排页面里的 block 通常对应竖直方向、inline 通常对应水平方向，但组件若改变了 writing-mode，逻辑轴的含义也会随之变化。

.article-scroller .subject {
  /* 文章沿块方向展开时，按逻辑方向观察进入视口的进度 */
  view-timeline-axis: block;
}

.carousel .card {
  /* 横向卡片列表使用 inline，能随书写模式表达行内方向 */
  view-timeline-axis: inline;
}

.fixed-horizontal-track .item {
  /* 只有布局契约明确锁定物理水平轴时才使用 x */
  view-timeline-axis: x;
}

.fixed-vertical-track .item {
  /* 只有布局契约明确锁定物理竖直轴时才使用 y */
  view-timeline-axis: y;
}

实践中可以先问“这个组件的滚动方向是布局语义，还是固定的屏幕方向”。前者优先选择 block/inline，后者才考虑 x/y。这样在切换书写模式或复用组件时，轴向规则不容易悄悄失效。

没有效果时先查滚动溢出和裁剪边界

即使属性名和值都写对了，视图时间线仍可能没有创建。subject 必须位于可滚动元素的范围内；滚动容器要在选定轴上产生溢出；如果对应方向没有溢出，或者溢出被 hidden、clip 处理，浏览器就没有可推进的滚动进度。

排查时按下面的顺序看结构：先找真正滚动的元素，再看它的内容是否超出容器，最后确认 view-timeline-axis 与溢出方向一致。不要只盯着动画关键帧，因为关键帧本身无法创造滚动时间线。

.timeline-scroller {
  /* 让容器在纵向有明确的滚动上下文 */
  max-height: 24rem;
  overflow-y: auto;
  overflow-x: hidden;
}

.timeline-subject {
  /* 轴向必须与容器实际可滚动方向保持一致 */
  view-timeline-name: --subject-view;
  view-timeline-axis: block;
}

@supports (view-timeline-axis: block) {
  .timeline-subject {
    /* 支持时启用渐进增强动画，基础内容仍然保留 */
    animation: reveal 1ms linear both;
    animation-timeline: --subject-view;
  }
}

@supports 只能判断声明是否被识别，不能替你保证页面已经产生溢出。因此它适合做能力降级，不适合代替对布局结构的检查。

把取值选择写成一张速查表

最终规则可以压缩成一句话：先按组件语义选择逻辑轴，只有产品明确要求屏幕物理方向时才选物理轴；然后检查同一方向上的滚动溢出和可见范围。这样定位“不生效”时，问题通常会落在滚动对象、溢出条件或兼容性，而不是属性名称本身。

常见问题

view-timeline-axis 默认是什么？

默认值是 block。对于普通中文横排页面，它通常对应竖直的块方向，但组件书写模式变化后，应重新按逻辑方向判断。

横向列表一定要写 x 吗？

不一定。若横向是组件的逻辑行内方向，优先使用 inline；只有必须锁定物理水平轴、且不希望随书写模式改变时，才使用 x。

总结一下：block/inline 解决布局语义，x/y 解决物理方向；subject、滚动容器和溢出条件决定时间线是否有可观察进度。先把这三层关系对齐，再处理动画细节，排查会清晰很多。