跳转到主内容
新派编程网 - 新潮编程理念，全新技术课堂！
📁 网站地图

怎么通过HTML的CSS scroll-timeline-name定义滚动时间线的标识名称

林译川
林译川
• 👁 0人浏览过
scroll-timeline-name 是 scroll-timeline 属性的组成部分，用于命名滚动时间线（如 --my-timeline），必须与 scroll-timeline 整体声明一同使用，设在滚动容器上（如 .scroller { scroll-timeline: --my-timeline y; }），再通过 animation-timeline: --my-timeline 绑定到动画元素，仅 Chromium 115+ 原生支持。 scroll-timeline-name 是什么，它在哪起作用
scroll-timeline-name
不是独立可用的 CSS 属性，它只是
scroll-timeline
属性的一个组成部分，用于给滚动时间线起一个标识名（类似 CSS 变量名），后续在
animation-timeline
中通过该名称引用。它本身不触发任何滚动动画，也不能直接写在元素上生效。 关键点在于：必须配合
scroll-timeline
属性整体使用，且仅在支持滚动时间线的浏览器中有效（Chrome 115+、Edge 115+，Firefox 和 Safari 尚未实现）。 常见错误现象： 单独写
scroll-timeline-name: --my-timeline;
→ 无效，CSS 解析会忽略整条声明 在不支持的浏览器中调试 → 控制台无报错，但动画完全不响应滚动 名称拼写不一致（比如一处写
--timeline
，另一处写
--time-line
）→ 动画绑定失败，静默降级 怎么正确定义并引用 scroll-timeline-name 定义名称必须嵌套在
scroll-timeline
声明中，语法为：
scroll-timeline: --my-timeline y
（或
x
）。其中
--my-timeline
是你指定的标识名，
y
表示纵向滚动轴（默认），
x
表示横向。 立即学习 “ 前端免费学习笔记（深入） ”； 实操建议： 使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件 如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更 下载 名称推荐用 CSS 自定义属性风格（
--xxx
），避免和关键字冲突 滚动容器必须有明确的滚动上下文（如
overflow-y: scroll
+ 固定高度），否则时间线无法建立
scroll-timeline
必须设在**滚动容器**上（比如
），不是动画元素本身 动画元素需额外设置
animation-timeline: --my-timeline
才能绑定
.scroller { height: 300px; overflow-y: scroll; scroll-timeline: --vertical-timeline y; }

.animated-box { animation: fade-in 1s linear; animation-timeline: --vertical-timeline; }

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

为什么不能用 id 或 class 当 timeline 名称
scroll-timeline-name
的值不是选择器，也不是 DOM 引用，它就是一个纯标识符（ident token），和
@keyframes
名称规则一致：只允许字母、数字、连字符、下划线，且不能以数字开头。 典型误用：
scroll-timeline: #main-container y;
→
#main-container
是选择器，非法
scroll-timeline: myTimeline y;
→ 合法，但易与未来 CSS 关键字冲突，不推荐
scroll-timeline: "timeline-1" y;
→ 加引号变成字符串，非法 兼容性注意： 目前仅 Chromium 内核支持，Safari 报
Invalid property name
类似错误（实际是整个
scroll-timeline
被忽略） 没有回退机制 —— 如果时间线未建立，
animation-timeline
会退回到默认的
auto
（即时间轴基于时钟，非滚动） 滚动容器没动，但动画播了？检查这三点 这是最常被忽略的调试盲区：动画播了，但和滚动无关，说明时间线没真正绑定成功。 确认滚动容器有内容溢出（
scrollHeight > clientHeight
），否则
y
轴时间线长度为 0 检查是否意外设置了
contain: paint
或
will-change: transform
，某些版本 Chromium 会干扰滚动时间线采集 用 Chrome DevTools 的 **Animations** 面板查看 timeline 类型：如果显示 “Time-based” 而非 “Scroll-based”，说明
animation-timeline
绑定失败或容器不满足条件 滚动时间线的名称本身不难设，难的是让整个链路（容器可滚 → 时间线生成 → 动画绑定 → 浏览器支持）全部对齐。尤其要注意，它不像
@keyframes
那样“定义即存在”，而是一个运行时依赖布局和滚动状态的动态机制。

相关文章