このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
IntersectionObserverEntry: intersectionRect プロパティ
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2019年3月以降、すべてのブラウザーで利用可能です。
intersectionRect は IntersectionObserverEntry インターフェイスの読み取り専用のプロパティで、 DOMRectReadOnly オブジェクトであり、交差ルート内に現在表示されている対象要素の部分全体を含む、最小の矩形を記述したものです。
値
DOMRectReadOnly で、対象要素のうち、ルートの交差矩形内に現在表示されている部分を表します。
この矩形は boundingClientRect と target の各先祖のクリップ矩形の交差部分をとって算出されます。ただし、交差ルート (root) 自体を除きます。
例
この単純な例では、交差コールバックは、対象要素のコンテンツを描画するコードが後で使用するために交差矩形を格納し、可視領域のみが再描画されるようにしています。
js
function intersectionCallback(entries) {
entries.forEach((entry) => {
refreshZones.push({
element: entry.target,
rect: entry.intersectionRect,
});
});
}
仕様書
| 仕様書 |
|---|
| Intersection Observer # dom-intersectionobserverentry-intersectionrect |
ブラウザーの互換性
ブラウザー互換性一覧表を表示するには、JavaScript を有効にしてください。