scroll()

可用性有限

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

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

scroll() CSS 函数 可与 animation-timeline 一起使用，以指示一个可滚动元素（滚动器）和滚动条轴，该滚动条轴将为当前元素的动画提供一个匿名的滚动进度时间线。通过在顶部和底部（或左侧和右侧）之间滚动滚动器来推进滚动进度时间线。滚动范围内的位置转换为进度百分比——开始时为 0%，结束时为 100%。

注意：如果指示的轴不包含滚动条，则动画时间线将处于非活动状态（进度为零）。

注意：每个 scroll() 的使用对应于 ScrollTimeline 在 Web 动画 API 中的自身唯一实例。

语法

css
/* Function with no parameters set */
animation-timeline: scroll();

/* Values for selecting the scroller element */
animation-timeline: scroll(nearest); /* Default */
animation-timeline: scroll(root);
animation-timeline: scroll(self);

/* Values for selecting the axis */
animation-timeline: scroll(block); /* Default */
animation-timeline: scroll(inline);
animation-timeline: scroll(y);
animation-timeline: scroll(x);

/* Examples that specify scroller and axis */
animation-timeline: scroll(block nearest); /* Default */
animation-timeline: scroll(inline root);
animation-timeline: scroll(x self);

参数

滚动器

指示将提供滚动进度时间线的滚动器元素的值可以是以下任何一个

最近的

当前元素最近的祖先，该祖先在任一轴上都有滚动条。这是默认值。

根

文档的根元素。

自身

当前元素本身。

轴

滚动条轴值可以是以下任何一个

块

滚动容器的块轴上的滚动条，即垂直于行内文本流的方向的轴。对于水平书写模式（如标准英语），这与 y 相同，而对于垂直书写模式，则与 x 相同。这是默认值。

内联

滚动容器的内联轴上的滚动条，即平行于行内文本流的方向的轴。对于水平书写模式，这与 x 相同，而对于垂直书写模式，则与 y 相同。

y

滚动容器的垂直轴上的滚动条。

x

滚动容器的水平轴上的滚动条。

注意：滚动器和轴值可以以任何顺序指定。

正式语法

<scroll()> = 
  scroll( [ <scroller> || <axis> ]? )  

<scroller> = 
  root     |
  nearest  |
  self     

<axis> = 
  block   |
  inline  |
  x       |
  y

示例

设置匿名滚动进度时间线

在此示例中，#square 元素使用匿名滚动进度时间线进行动画处理，该时间线使用 scroll() 函数应用于要进行动画处理的元素。在此特定示例中，时间线由最近的父元素提供，该父元素具有（任何）滚动条，来自块方向的滚动条。

HTML

下面显示了示例的 HTML。

html
<div id="container">
  <div id="square"></div>
  <div id="stretcher"></div>
</div>

CSS

下面的 CSS 定义了一个正方形，根据由 animation-timeline 属性提供的动画时间轴，以交替的方向旋转。在本例中，时间轴由 scroll(block nearest) 提供，这意味着它将选择最近具有滚动条的祖先元素的块方向上的滚动条；在本例中，是“container”元素的垂直滚动条。

注意：block 和 nearest 实际上是默认参数值，因此我们也可以只使用 scroll()。

css
#square {
  background-color: deeppink;
  width: 100px;
  height: 100px;
  margin-top: 100px;
  position: absolute;
  bottom: 0;

  animation-name: rotateAnimation;
  animation-duration: 1ms; /* Firefox requires this to apply the animation */
  animation-direction: alternate;
  animation-timeline: scroll(block nearest);
}

@keyframes rotateAnimation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

容器的 CSS 将其高度设置为 300px，并且我们还设置容器在溢出时创建垂直滚动条。“stretcher” CSS 将块高度设置为 600px，这会强制容器元素溢出。这两者共同确保容器具有垂直滚动条，这使其可以作为匿名滚动进度时间轴的来源。

css
#container {
  height: 300px;
  overflow-y: scroll;
  position: relative;
}

#stretcher {
  height: 600px;
}

结果

滚动查看正方形元素的动画效果。

规范

规范
滚动驱动的动画
# 滚动表示法

浏览器兼容性

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

另请参阅