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