滚动时间轴

有限可用性

此功能不是基线功能，因为它在一些最常用的浏览器中不起作用。

实验性： 这是一个 实验性技术
在生产环境中使用此功能之前，请仔细查看 浏览器兼容性表。

ScrollTimeline 接口是 Web 动画 API 的一部分，它表示一个滚动进度时间轴（有关更多详细信息，请参见 CSS 滚动驱动动画）。

将 ScrollTimeline 实例传递给 Animation() 构造函数或 animate() 方法，将其指定为将控制动画进度的时序。

AnimationTimeline ScrollTimeline

构造函数

ScrollTimeline()

创建一个新的 ScrollTimeline 对象实例。

实例属性

此接口还继承了其父级 AnimationTimeline 的属性。

source 只读

返回对滚动元素（滚动器）的引用，其滚动位置驱动时间轴的进度，因此也驱动动画的进度。

axis 只读

返回一个枚举值，表示驱动时间轴进度的滚动轴。

实例方法

此接口继承了其父级 AnimationTimeline 的方法。

示例

显示滚动进度时间轴的来源和轴

在本例中，我们使用 class 为 box 的元素在视图进度时间轴上进行动画处理 - 当文档滚动时，它会在屏幕上进行动画处理。我们将 source 元素和滚动 axis 输出到右上角的 output 元素中。

HTML

下面显示了示例的 HTML。

html
<div class="content"></div>
<div class="box"></div>
<div class="output"></div>

CSS

示例的 CSS 如下所示

css
.content {
  height: 2000px;
}

.box {
  width: 100px;
  height: 100px;
  border-radius: 10px;
  background-color: rebeccapurple;
  position: fixed;
  top: 20px;
  left: 0%;
}

.output {
  font-family: Arial, Helvetica, sans-serif;
  position: fixed;
  top: 5px;
  right: 5px;
}

JavaScript

在 JavaScript 中，我们获取对 box 和 output <div> 的引用，然后创建一个新的 ScrollTimeline，指定将驱动滚动时间轴进度的元素是文档 (<html>) 元素，滚动轴是 block 轴。然后，我们使用 Web 动画 API 对 box 元素进行动画处理。最后，我们在 output 元素中显示源元素和轴。

js
const box = document.querySelector(".box");
const output = document.querySelector(".output");

const timeline = new ScrollTimeline({
  source: document.documentElement,
  axis: "block",
});

box.animate(
  {
    rotate: ["0deg", "720deg"],
    left: ["0%", "100%"],
  },
  {
    timeline,
  },
);

output.textContent = `Timeline source element: ${timeline.source.nodeName}. Timeline scroll axis: ${timeline.axis}`;

结果

滚动查看方框的动画。

规范

规范
滚动驱动动画
# scrolltimeline-interface

浏览器兼容性

BCD 表只在启用 JavaScript 的浏览器中加载。

另请参阅