scroll-timeline-axis

有限可用性

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

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

scroll-timeline-axis CSS 属性用于指定将用于为命名滚动进度时间线动画提供时间线的滚动条方向，该动画通过在可滚动元素（滚动器）之间滚动来进行，在顶部和底部（或左侧和右侧）之间。scroll-timeline 设置在将提供时间线的滚动器上。有关更多详细信息，请参阅 CSS 滚动驱动动画。

注意：如果滚动器元素在其轴维度上没有溢出其容器，或者如果溢出被隐藏或剪裁，则不会创建滚动进度时间线。

scroll-timeline-axis 和 scroll-timeline-name 属性也可以使用 scroll-timeline 简写属性设置。

语法

css
/* Logical property values */
scroll-timeline-axis: block;
scroll-timeline-axis: inline;
/* Non-logical property values */
scroll-timeline-axis: y;
scroll-timeline-axis: x;

值

scroll-timeline-axis 允许的值为

block

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

inline

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

y

滚动器元素的垂直轴上的滚动条。

x

滚动器元素的水平轴上的滚动条。

正式定义

初始值block
应用于滚动容器
继承否
计算值如指定
动画类型不可动画

正式语法

scroll-timeline-axis = 
  [ block | inline | x | y ]#

示例

定义滚动进度时间线的轴

在本例中，使用:root元素（<html>）上的scroll-timeline-name属性定义了一个名为--myScroller的滚动进度时间线。然后，使用animation-timeline: --myScroller将此时间线应用于具有animation类的元素上的动画。

为了演示scroll-timeline-axis的效果，本例使用水平（非默认）滚动条来驱动动画。

HTML

示例的 HTML 代码如下所示。

html
<body>
  <div class="content"></div>
  <div class="box animation"></div>
</body>

CSS

容器的 CSS 使用scroll-timeline-name属性将:root设置为名为--myScroller的滚动进度时间线的来源。使用scroll-timeline-axis: x;（Chromium）和scroll-timeline-axis: horizontal;（Firefox）设置滚动轴 - 这会导致水平滚动条的位置决定动画时间线。

.content元素的宽度设置为一个较大的值，以使其超出:root元素。

同样值得注意的是，.animation元素使用animation-timeline: --myScroller;应用了时间线，并且还应用了animation-duration，以便示例在 Firefox 中正常工作。

css
:root {
  scroll-timeline-name: --myScroller;

  /* Chromium supports the new x/y syntax */
  scroll-timeline-axis: x;
  /* Firefox still supports the old horizontal/vertical syntax */
  scroll-timeline-axis: horizontal;
}

body {
  margin: 0;
  overflow-y: hidden;
}

.content {
  height: 100vh;
  width: 2000px;
}

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

.animation {
  animation: rotate-appear;
  animation-timeline: --myScroller;
  animation-duration: 1ms; /* Firefox requires this to apply the animation */
}

@keyframes rotate-appear {
  from {
    rotate: 0deg;
    top: 0%;
  }

  to {
    rotate: 720deg;
    top: 100%;
  }
}

结果

滚动底部的水平条，您会看到正方形在滚动时进行动画。

规范

规范
滚动驱动动画
# propdef-scroll-timeline-axis

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参见