1. Web
  2. CSS
  3. scroll-timeline-axis

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 ]#

示例

定义滚动进度时间线的轴

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

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

HTML

示例的 HTML 如下所示。

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

CSS

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

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

另外值得注意的是，.animation 元素已应用时间线 animation-timeline: --my-scroller;，并且还应用了 animation-duration，以便该示例在 Firefox 中也能正常工作。

css
:root {
  scroll-timeline-name: --my-scroller;

  /* 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: --my-scroller;
  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

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面最后由 MDN 贡献者 于 修改。

在 GitHub 上查看此页面 • 报告此内容的问题
© . Content available under a Creative Commons license.