CSS Reference

scroll-timeline-axis

スクロール進行タイムラインの軸を指定する

scroll-timeline-axis プロパティは、スクロールコンテナから取得される、名前付き「Scroll Progress Timeline（スクロール進行タイムライン）」の軸を指定します。

簡単に言えば、関連付けられたスクロール進行タイムラインを、縦（垂直）、横（水平）どちらの方向のスクロールに対して動作させたいかを指定するものです。

なお、指定されたボックスがスクロールコンテナでない場合、対応する名前付きのスクロール進行タイムラインは非アクティブになります。

scroll-timeline-axis プロパティに指定できる値は下記の通りです。

block スクロールコンテナのブロック方向の軸を指定します。書字方向が横書きの場合は縦方向、かつ y と同じになり、縦書きの場合は横方向、かつ x と同じになります。（既定値）
inline スクロールコンテナのインライン方向の軸を指定します。書字方向が横書きの場合は横方向、かつ x と同じになり、縦書きの場合は縦方向、かつ y と同じになります。
y スクロールコンテナの垂直方向の軸を指定します。
x スクロールコンテナの水平方向の軸を指定します。

scroll-timeline-axisの仕様

初期値
  • block
対象となる要素
  • すべての要素
継承
  • なし

scroll-timeline-axisのサンプルソース

html {
  scroll-timeline-name: --example-timeline;
  scroll-timeline-axis: y;
}

主要ブラウザの対応

IE11 ×
Edge（EdgeHTML） ×
Edge（Chromium） ○
Chrome ○
Firefox ×
Safari ×
iOS Safari ×
Android Chrome ○

関連するプロパティ

仕様書

用途から CSS プロパティやセレクタを探す

用途から CSS プロパティやセレクタを逆引きできます。

対応ブラウザから CSS プロパティやセレクタを探す

対応ブラウザから CSS プロパティやセレクタを逆引きできます。

Edge（EdgeHTML）
Edge（Chromium）
Firefox
Chrome
Safari
iOS Safari
Android Chrome