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.