1. 開発者向けのウェブ技術
  2. Web API
  3. Element
  4. scrollsnapchange

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

Element: scrollsnapchange イベント

利用可能性は限定的

この機能はベースラインではありません。最も広く使用されているブラウザーの一部で動作しません。

Want more browser support for this feature? Tell us why.

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

scrollsnapchange は Element インターフェイスのイベントで、スクロール操作の終わりに、新しいスクロールスナップターゲットが選択されたときに、対応する scrollend イベントが発生する直前に、スクロールコンテナー内で発行されます。

スクロール操作は、ユーザーがスクロールコンテナー内でスクロールを完了した時点で終わります。例えば、タッチジェスチャーを使用したり、スクロールバー上でマウスポインターをドラッグしたりして、そのジェスチャーを解除したりしたときです。

構文

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

js
addEventListener("scrollsnapchange", (event) => { })

onscrollsnapchange = (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> 要素で scrollsnapchange が発生するようにします。ハンドラー関数では、 SnapEvent.snapTargetBlock プロパティで参照される子要素に selected クラスを設定します。これは、イベントが発生したときに、選択されたように見えるようにスタイルを設定するために使用することができます（例えば、アニメーションを使用して）。

js
const scrollingElem = document.querySelector("main");

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

仕様書

仕様書
CSS Scroll Snap Module Level 2
# scrollsnapchange

ブラウザーの互換性

関連情報

MDN の改良に協力

協力方法を知る

このページは MDN の貢献者によって に最終更新されました。

GitHub でこのページを表示 • このコンテンツに関する問題を報告