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 2019年3月.
intersectionRect は IntersectionObserverEntry インターフェイスの読み取り専用のプロパティで、 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 |
ブラウザーの互換性
Loading…