CSS timeline-scope怎样让不同滚动容器共享命名时间线

如果滚动容器和动画元素是兄弟节点，直接写 animation-timeline: --feed-scroll 往往不会得到想要的效果。原因不是动画关键帧写错，而是命名滚动时间线默认只在有限的后代作用域内可见。把 timeline-scope: --feed-scroll 放到两者共同祖先上，才能把这条命名时间线扩展到共同祖先及其后代。

官方地址：https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/timeline-scope

先把滚动容器和动画元素放进同一张关系图

这个小例子模拟一个左侧可滚动内容区和右侧进度指示条。两者都放在 .layout 中，但 .indicator 并不是 .scroller 的后代。目标是让进度指示条使用 .scroller 提供的 --feed-scroll。

这里的关键不是“按顺序执行哪些 CSS”，而是几个声明之间的静态关系：滚动容器拥有命名时间线，动画元素引用这个名字，共同祖先负责扩大可见作用域。

先用两个属性建立命名关系

滚动端使用 scroll-timeline-name 声明名字，动画端使用 animation-timeline 引用同一个名字。进度条的关键帧只描述视觉变化，不负责决定滚动来源。

  
滚动内容
  

.layout {
  /* 让滚动区域和进度指示条成为同一共同祖先下的两个分支。 */
  display: grid;
  grid-template-columns: minmax(0, 1fr) 12px;
  gap: 16px;
  min-height: 280px;
}

.scroller {
  /* 只有这个元素产生滚动范围，并把时间线命名为 --feed-scroll。 */
  overflow: auto;
  scroll-timeline-name: --feed-scroll;
  scroll-timeline-axis: block;
}

.long-content {
  /* 内容高度只是为了形成可滚动的结构，不代表固定业务尺寸。 */
  min-height: 900px;
  padding: 24px;
}

.indicator {
  /* 动画端引用同一个命名时间线。 */
  animation: fill-indicator linear both;
  animation-timeline: --feed-scroll;
  transform-origin: top;
}

@keyframes fill-indicator {
  /* 关键帧只表达进度条的视觉变化。 */
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

到这里，名字虽然一致，但 .indicator 与 .scroller 仍然是兄弟关系。默认作用域下，动画元素通常只能引用它所在树中可见的命名时间线；因此还要明确告诉浏览器，哪一个祖先负责扩大这个名字的作用范围。

在共同祖先上声明 timeline-scope

把 timeline-scope: --feed-scroll 加到 .layout，表示这个共同祖先及其后代可以使用由后代滚动元素声明的同名时间线。这样，.indicator 虽然不是 .scroller 的子元素，也处在同一个命名时间线作用域中。

.layout {
  /* 扩大 --feed-scroll 的命名作用域，让两个分支共享它。 */
  timeline-scope: --feed-scroll;
}

.scroller {
  /* 滚动端仍负责提供时间线，scope 不会替它制造滚动。 */
  scroll-timeline-name: --feed-scroll;
  scroll-timeline-axis: block;
}

.indicator {
  /* 动画端只引用名字，不需要知道滚动元素的 DOM 位置。 */
  animation-timeline: --feed-scroll;
}

需要注意三件事：

• timeline-scope 不能代替 overflow: auto，没有实际滚动源时，动画没有可用进度。
• 名字必须一致，--feed-scroll 和 --feed-progress 是两条不同的命名时间线。
• 作用域是树形关系，不是全局变量；把属性放在无关分支上，不能让另一个分支自动看到它。

用 @supports 给新属性留出静态降级

浏览器不支持 timeline-scope 时，进度条不应影响正文阅读。可以先给指示条一个稳定的静态样式，再把命名时间线配置放进特性查询。查询成立时才启用滚动驱动动画：

.indicator {
  /* 不支持滚动驱动动画时，至少保留可见的静态装饰。 */
  background: #b9c7d8;
  transform: scaleY(0.35);
}

@supports (timeline-scope: --feed-scroll) and
          (animation-timeline: --feed-scroll) {
  .layout {
    /* 只有支持命名作用域的浏览器才扩大时间线范围。 */
    timeline-scope: --feed-scroll;
  }

  .indicator {
    /* 支持完整关系时，静态样式才让位给滚动进度。 */
    background: #2563eb;
    animation: fill-indicator linear both;
    animation-timeline: --feed-scroll;
  }
}

这里的降级是“保留信息，不强求动态效果”：旧浏览器仍能看到一条静态指示条。若项目必须兼容更旧环境，也可以把进度反馈改成标题、固定提示或脚本方案，但应单独评估脚本监听滚动带来的性能和可访问性成本。

不要把 timeline-scope 和匿名时间线混为一谈

timeline-scope 针对的是通过 scroll-timeline-name 或 view-timeline-name 声明的命名时间线。像下面这样直接写 animation-timeline: scroll()，使用的是匿名时间线，它不依赖一个可跨树查找的名字，也不能用 timeline-scope 把它变成共享时间线。

.local-progress {
  /* 匿名 scroll() 只适合它自身可见的滚动时间线关系。 */
  animation: fill-indicator linear both;
  animation-timeline: scroll(block nearest);
}

.named-progress {
  /* 跨兄弟分支时使用命名时间线，再由共同祖先扩大作用域。 */
  animation-timeline: --feed-scroll;
}

选择时可以记住一个简单边界：如果滚动元素和动画元素天然处在同一个局部组件中，匿名时间线更直接；如果两个分支需要共享同一个明确的滚动来源，命名时间线加 timeline-scope 更容易表达结构。

落地前的三项检查

常见问题

timeline-scope 会自动创建滚动容器吗？

不会。它只修改命名时间线的作用域，滚动容器仍需要实际的滚动内容以及合适的 overflow 设置。

为什么名字一样，动画还是不动？

先看滚动源是否真的能滚动，再看动画元素是否处于声明了 timeline-scope 的共同祖先范围内，最后确认关键帧和 animation-timeline 没有被其它规则覆盖。

timeline-scope 能不能写成 all？

可以用 all 表示扩大到元素及其子树中的命名时间线，但工程代码通常更适合写明确的自定义时间线名称，便于阅读和控制边界。

匿名 scroll() 什么时候更合适？

当动画和滚动关系局部、无需跨兄弟分支共享名字时，匿名时间线写法更短；需要多个元素引用同一个明确来源时，再考虑命名时间线和 timeline-scope。