scroll()

構文

/* 引数を設定しない関数 */ animation-timeline: scroll(); /* スクローラー要素を選択する値 */ animation-timeline: scroll(nearest); /* 既定 */ animation-timeline: scroll(root); animation-timeline: scroll(self); /* 軸を選択する値 */ animation-timeline: scroll(block); /* 既定 */ animation-timeline: scroll(inline); animation-timeline: scroll(y); animation-timeline: scroll(x); /* スクローラーと軸を指定する例 */ animation-timeline: scroll(block nearest); /* 既定 */ animation-timeline: scroll(inline root); animation-timeline: scroll(x self); 

引数

スクローラー

スクロール進行タイムラインを提供するスクローラー要素を示す値には、以下のいずれかを指定します。

nearest

どちらかの軸にスクロールバーを持つ、現在の要素の最も近い祖先。これが既定値です。

root

文書のルート要素です。

self

現在の要素自身です。

軸

スクロールバー軸の値は以下のいずれかになります。

block

スクロールコンテナーのブロック軸にあるスクロールバーで、行内のテキストの流れに垂直な方向の軸です。標準的な英語のような横書きモードでは y と同じになり、縦書きモードでは x と同じになります。これが既定値です。

inline

スクロールコンテナーのインライン軸にあるスクロールバーで、行のテキストの流れと平行な方向の軸です。横書きモードでは x と同じになり、縦書きモードでは y と同じになります。

y

スクロールコンテナーの縦軸にあるスクロールバー。

x

スクロールコンテナーの横軸にあるスクロールバー。

形式文法

<scroll()> = 
 scroll( [ <scroller> || <axis> ]? ) 

<scroller> = 
 root |
 nearest |
 self 

<axis> = 
 block |
 inline |
 x |
 y 

例

無名スクロール進行タイムラインの設定

この例では、 #square 要素は scroll() 関数を使用してアニメーションされる要素に適用される無名スクロール進行タイムラインを使ってアニメーションされます。 この具体的な例でのタイムラインは、ブロック方向のスクロールバーから、（任意の）スクロールバーを持つ最も近い親要素によって指定されたものです。

HTML

例の HTML は下記の通りです。

<div id="container"> <div id="square"></div> <div id="stretcher"></div> </div> 

CSS

下記の CSS では、animation-timelineプロパティで指定されたタイムラインに従って、交互に回転する正方形を定義しています。 この場合、タイムラインは scroll(block nearest) によって指定されます。これはスクロールバーを保有する最も近い祖先要素のブロック方向のスクロールバーを選択することを意味しています。

#square { background-color: deeppink; width: 100px; height: 100px; margin-top: 100px; position: absolute; bottom: 0; animation-name: rotateAnimation; animation-duration: 1ms; /* Firefox では、アニメーションを適用するために必要 */ animation-direction: alternate; animation-timeline: scroll(block nearest); } @keyframes rotateAnimation { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } 

コンテナー用の CSS では、コンテナーの高さを 300px に設定し、コンテナーがはみ出した場合に垂直スクロールバーを作成するようにも設定しています。 "stretcher" の CSS では、ブロックの高さを 600px に設定し、コンテナー要素を強制的にオーバーフローさせます。 この 2 つを組み合わせることで、コンテナーに垂直スクロールバーを確実に設置し、無名スクロール進行タイムラインのソースとして使用することができます。

#container { height: 300px; overflow-y: scroll; position: relative; } #stretcher { height: 600px; } 

結果

スクロールすると、正方形の要素がアニメーションします。

仕様書

ブラウザーの互換性

関連情報

• CSS スクロール駆動アニメーション
• CSS アニメーションの使用
• animation-timeline