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

ブラウザーの互換性

BCD tables only load in the browser

関連情報