SnapEvent

コンストラクター

SnapEvent() Experimental

新しい SnapEvent オブジェクトインスタンスを作成します。

インスタンスプロパティ

親である Event から継承しているプロパティもあります。

snapTargetBlock 読取専用 Experimental

イベントが発生したときにブロック方向にスナップされた要素への参照を返します。また、インライン方向のみでスクロールのスナップが発生したため、ブロック方向にスナップされた要素がない場合は null を返します。

snapTargetInline 読取専用 Experimental

イベントが発生したときにインライン方向にスナップされた要素への参照を返します。また、スクロールのスナップがブロック方向のみで発生し、インライン方向にスナップされた要素がない場合は null を返します。

例

scrollsnapchanging の例

以下の scrollsnapchanging ハンドラー関数の例では、 snapTargetBlock の要素の class 属性を、 Element.className プロパティを使用して pending に設定しています。これは、スナップターゲットが待機状態になった際に、要素のスタイルを変更するために使用できます。

なお、このハンドラーは、ブロック方向のスクロールコンテナー（ページの writing-mode が横書きに設定されている場合は縦スクロール）に設定されることを意図しているため、複数のイベントの間で snapTargetBlock 要素のみが変更されます。 SnapEvent.snapTargetInline は、インライン方向にはスナップが発生しないため、 null が返されます。

scrollingElem.addEventListener("scrollsnapchanging", (event) => {
  // 現在の待機状態のスナップターゲットのクラスに "pending" を設定
  event.snapTargetBlock.className = "pending";

  // ブロック方向の新しい待機状態のスナップターゲット要素を出力
  console.log(event.snapTargetBlock);

  // null を出力。インラインスナップは発生しない
  console.log(event.snapTargetInline);
});

scrollsnapchange の例

次の scrollsnapchange ハンドラー関数の例では、 SnapEvent.snapTargetBlock 要素に選択クラスを設定しています。これは、新たに選択されたスナップターゲットを、選択されているように見せるスタイル（例えば、アニメーションするなど）に使用することができます。

scrollingElem.addEventListener("scrollsnapchange", (event) => {
  event.snapTargetBlock.className = "selected";
});

仕様書

ブラウザーの互換性

関連情報

• scrollsnapchanging イベント
• scrollsnapchange イベント
• CSS スクロールスナップモジュール
• スクロールスナップイベントの使用
• Scroll Snap Events (developer.chrome.com, 2024)