IntersectionObserverEntry.intersectionRect
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