IntersectionObserverEntry

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2019.

* Some parts of this feature may have varying levels of support.

IntersectionObserverEntry交差オブザーバー API のインターフェイスで、遷移の特定の瞬間における対象要素とそのルートコンテナー間の交差状態を表します。

IntersectionObserverEntry のインスタンスは、 IntersectionObserver のコールバックに entries 引数で渡されます。それ以外でこれらのオブジェクト取得することができるのは、 IntersectionObserver.takeRecords() を呼び出した場合のみです。

プロパティ

IntersectionObserverEntry.boundingClientRect 読取専用

対象要素の外接矩形を DOMRectReadOnly として返します。境界は Element.getBoundingClientRect() の記事で説明されているのと同様に計算されます。

IntersectionObserverEntry.intersectionRatio 読取専用

intersectionRectboundingClientRect の比率を返します。

IntersectionObserverEntry.intersectionRect 読取専用

対象の表示領域の矩形を表す DOMRectReadOnly を返します。

IntersectionObserverEntry.isIntersecting 読取専用

論理値で、対象要素が、この交差オブザーバーのルートに対象要素が交差したときは true になります。この値が true の場合、 IntersectionObserverEntry は交差状態への変わり目にあることを示します。 false の場合、交差状態から交差なしへの変わり目であることがわかります。

IntersectionObserverEntry.rootBounds 読取専用

この交差オブザーバーのルートの矩形である DOMRectReadOnly を返します。

IntersectionObserverEntry.target 読取専用

ルートとの交差状態が変化した Element です。

IntersectionObserverEntry.time 読取専用

DOMHighResTimeStamp で、この IntersectionObserver時刻の起点を基準にして、交差が記録された時刻を示します。

メソッド

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

仕様書

Specification
Intersection Observer
# intersection-observer-entry

ブラウザーの互換性

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
IntersectionObserverEntry
IntersectionObserverEntry() constructor
Experimental
boundingClientRect
intersectionRatio
intersectionRect
isIntersecting
isVisible
Experimental
rootBounds
target
time

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.