DOM

インターフェイス

IntersectionObserverEntry インターフェイス

  編集:2022.04.07 by T.A.

MS

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

Intersection Observer API の IntersectionObserverEntry インターフェイスは、特定の遷移時点でのターゲット要素とそのルートコンテナ間の共通部分を記述します。 IntersectionObserverEntry のインスタンスは、その entries パラメータで IntersectionObserver コールバックに渡されます。それ以外の場合、これらのオブジェクトは IntersectionObserver.takeRecords() を呼び出すことによってのみ取得できます。

プロパティ
IntersectionObserverEntry.boundingClientRect 読取専用
ターゲット要素の矩形の境界を DOMRectReadOnly として返します。境界は Element.getBoundingClientRect() のドキュメントで説明されているのと同様に計算されます。
IntersectionObserverEntry.intersectionRatio 読取専用
intersectionRect と boundingClientRect の比率を返します。
IntersectionObserverEntry.intersectionRect 読取専用
ターゲットの表示領域を表す DOMRectReadOnly を返します。
IntersectionObserverEntry.isIntersecting 読取専用
ターゲットの要素が、交差を監視しているルートを超えたら true を返す真偽値です。true の場合、IntersectionObserverEntry は交差状態の変わり目にあります。false の場合、交差から非交差への変わり目であることがわかります。
IntersectionObserverEntry.rootBounds 読取専用
交差を監視しているルートの DOMRectReadOnly を返します。
IntersectionObserverEntry.target 読取専用
ルートとの交差が変化する Element
IntersectionObserverEntry.time 読取専用
IntersectionObserver の時刻の起点を基準にして、交差が記録された時刻を示す DOMHighResTimeStamp
メソッド

このインタフェースにはメソッドがありません。


テスト
HTML:

ここに表示
スクリプト組み込み:



スクリプト:


スクリプト:



表示内容:
表示内容: