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