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