SnapEvent: snapTargetBlock プロパティ

Limited availability

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

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

snapTargetBlockSnapEvent インターフェイスの読み取り専用プロパティで、このイベントが発行されたときに、ブロック方向にスナップされた要素への参照を返します。

具体的には、次のようになります。

  • scrollsnapchanging イベントの場合、これは待機中のブロック方向のスナップターゲット(つまり、現在のスクロール捜査が終了したときに選択されるもの)を参照します。
  • scrollsnapchange イベントの場合、これは新しく選択されたブロック方向のスナップターゲットを参照します。

SnapEvent で利用可能なプロパティ値は、スクロールコンテナ-に設定された scroll-snap-type プロパティの値に直接対応します。 snapTargetBlock は、スナップ軸が block (または、現在の書字方向で block に相当する物理軸値の場合)または both と指定されている場合、要素参照のみを返します。

スナップする要素を表す Node、またはスクロールスナップがインライン方向でしか発生せず、ブロック方向にスナップされる要素がない場合は null です。

スナップされた要素が擬似要素であった場合、返される Node はその擬似要素を所有する要素です。

短い例については SnapEvent のメインページを、完全な例と説明についてはスクロールスナップイベントの使用ガイドを参照してください。

仕様書

Specification
CSS Scroll Snap Module Level 2
# dom-snapevent-snaptargetblock

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
snapTargetBlock
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.

関連情報