Element: scrollsnapchanging イベント

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

scrollsnapchanging は Element インターフェイスのイベントで、新しいスクロールスナップターゲットが待機中であるとブラウザーが判断した場合に、すなわち現在のスクロールジェスチャーが終わったときに選択される場合に、スクロールコンテナー内で発行されます。

仕様上、このイベントはスクロールジェスチャー中に発生します。ユーザーが新しいスナップターゲット候補の上に移動するたびに発生します。例えば、ユーザーはタッチ画面端末で指をドラッグしてゆっくりとスクロールしたり、スクロールバーのマウスボタンを押したままマウスを移動させたりすることができます。そのため、 scrollsnapchanging は、各スクロールジェスチャーに対して複数回発行される可能性があります。

ただし、複数のスナップ対象にスクロールジェスチャーが移される可能性がある場合、すべてに対して発行されるわけではありません。 むしろ、スナップが潜在的に最後に落ち着く対象に対してのみ発行されます。

構文

addEventListener() などのメソッドでイベント名を使用するか、イベントハンドラープロパティを設定します。

js
addEventListener("scrollsnapchanging", (event) => {});

onscrollsnapchanging = (event) => {};

イベント型

SnapEvent です。一般的な Event 型を継承しています。

例

基本的な使用

例えば、スクロールが発生するような重要なコンテンツを含む <main> 要素があったとします。

html
<main>
  <!-- 重要なコンテンツ -->
</main>

CSS の scroll-snap-type プロパティと他のプロパティを組み合わせて使用することで、 <main> 要素のスクロール時に子要素にスナップするスクロールコンテナーにすることができます。例を示します。

css
main {
  width: 250px;
  height: 450px;
  overflow: scroll;
  scroll-snap-type: block mandatory;
}

次の JavaScript のコードは、その子要素の 1 つが保留中のスナップターゲットになったときに、 <main> 要素で scrollsnapchanging イベントを発行します。ハンドラー関数では、snapTargetBlock プロパティで参照される子要素に保留中のクラスを設定します。このクラスは、イベントが発行されたときに、その子要素を異なるスタイルで表示するために使用することができます。

js
scrollingElem.addEventListener("scrollsnapchanging", (event) => {
  // 以前設定されていた "pending" クラスを除去
  const pendingElems = document.querySelectorAll(".pending");
  pendingElems.forEach((elem) => {
    elem.classList.remove("pending");
  });

  // 現在の待機中のスナップターゲットのクラスに "pending" を設定
  event.snapTargetBlock.classList.add("pending");
});

関数の先頭で、前回 pending クラスが存在していたすべての要素を選択し、それを除去するようにします。これにより、最新の待機中のスナップ対象のみがスタイル設定されます。

仕様書

Specification
CSS Scroll Snap Module Level 2
# scrollsnapchanging

ブラウザーの互換性

BCD tables only load in the browser

関連情報