scroll()

スクローラー

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

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 スクロール駆動アニメーション (en-US)
• CSS アニメーションの使用
• animation-timeline