Window: scrollsnapchanging イベント

Limited availability

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

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

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

このイベントは、 Element インターフェイスの scrollsnapchanging イベントとほぼ同じように動作しますが、スクロールスナップコンテナーとして HTML 文書全体を設定する必要がある点が異なります（つまり、 scroll-snap-type が <html> 要素に設定されている状態です）。

構文

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

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

onscrollsnapchanging = (event) => { }

例

基本的な使用

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

html

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

<main> 要素は、 CSS プロパティの組み合わせを使用してスクロール可能なコンテナーにすることができます。例を示します。

css

main {
  width: 250px;
  height: 450px;
  overflow: scroll;
}

次に、 scroll-snap-type プロパティを <html> 要素に指定することで、スクロール対象コンテンツにスクロールスナップ動作を実装することができます。

css

html {
  scroll-snap-type: block mandatory;
}

次の JavaScript スニペットは、<main> 要素の子要素が待機中のスナップ対象となった際に、HTML 文書上で scrollsnapchanging イベントが発生するようにします。ハンドラー関数では、 snapTargetBlock プロパティで参照される子要素に pending クラスを設定します。これは、イベントが発生したときに、スタイルを変化させるために使用することができます。

window.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

ブラウザーの互換性

Help improve MDN

Learn how to contribute

This page was last modified on ⁨2025年9月29日⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content

Window: scrollsnapchanging イベント

構文

イベント型

例

基本的な使用

仕様書

ブラウザーの互換性

関連情報

Help improve MDN