IntersectionObserverEntry: intersectionRect プロパティ
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.
IntersectionObserverEntry
インターフェイスの読み取り専用の intersectionRect
プロパティは DOMRectReadOnly
オブジェクトで、交差ルート内に現在表示されている対象要素の部分全体を含む、最小の矩形を記述したものです。
値
DOMRectReadOnly
で、対象要素のうち、ルートの交差矩形内に現在表示されている部分を表します。
この矩形は boundingClientRect
と target
の各先祖のクリップ矩形の交差部分をとって算出されます。ただし、交差ルート (root
) 自体を除きます。
例
この単純な例では、交差コールバックは、対象要素のコンテンツを描画するコードが後で使用するために交差矩形を格納し、可視領域のみが再描画されるようにしています。
js
function intersectionCallback(entries) {
entries.forEach((entry) => {
refreshZones.push({
element: entry.target,
rect: entry.intersectionRect,
});
});
}
仕様書
Specification |
---|
Intersection Observer # dom-intersectionobserverentry-intersectionrect |
ブラウザーの互換性
BCD tables only load in the browser