SnapEvent: SnapEvent() コンストラクター
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
SnapEvent() コンストラクターは、新しい SnapEvent オブジェクトインスタンスを作成します。
構文
js
new SnapEvent(type, init)
引数
type-
イベントの型を表す文字列。
scrollsnapchangingイベントの場合は、これはscrollsnapchangingです。scrollsnapchangeイベントの場合は、これはscrollsnapchangeです。 init-
以下のプロパティを持つオブジェクトです。
snapTargetBlock省略可-
イベントが発行されたときに、ブロック方向にスナップされた要素への参照を返します。また、インライン方向でのみスクロールスナップが発生し、ブロック方向にスナップされる要素がない場合は
nullを返します。 snapTargetInline省略可-
イベントが発行されたときに、インライン方向にスナップされた、要素への参照を返します。また、ブロック方向でのみスクロールスナップが発生し、インライン方向にスナップされる要素がない場合は
nullを返します。
例
開発者は、このコンストラクターを手動で使うべきではありません。新しい SnapEvent オブジェクトは、 scrollsnapchanging イベントまたは scrollsnapchange イベントが発行された結果としてハンドラーが呼び出されたときに構築されます。
例えば、
js
mainElem.addEventListener("scrollsnapchange", (event) => {
// …
// コンソールに SnapEvent オブジェクトのインスタンスを出力
console.log(event);
});
仕様書
| Specification |
|---|
| CSS Scroll Snap Module Level 2 # dom-snapevent-snapevent |
ブラウザーの互換性
関連情報
scrollsnapchangingイベントscrollsnapchangeイベント- CSS スクロールスナップモジュール
- Scroll Snap Events (developer.chrome.com, 2024)