IntersectionObserver: root プロパティ

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.

IntersectionObserver インターフェイスの読み取り専用の root プロパティは、 オブザーバーの対象となる要素の外接ボックスの境界をビューポートとして扱う Element または Document を識別します。

もし rootnull であれば、実際の文書のビューポートの境界が使用されます。

Element または Document オブジェクトで、この外接ボックスが、対象要素のどの程度が見えるかを決定するためのビューポートの境界として使用されます。 この外接矩形が IntersectionObserver() コンストラクターに渡されたオプションで指定されたマージンによってオフセットされたものと、対象要素の、対象要素に重なる全ての要素または他のオブジェクトの境界を引いた交差部分が、対象要素の可視領域と見なされます。

もし rootnull であれば、自分の文書をルートとして使用し、そのビューポートの境界(つまり、文書の可視領域)をルート境界として使用します。

この例では、交差オブザーバのルート要素の border を、 2 ピクセルの中緑色の線に設定しています。

js
observer.root.style.border = "2px solid #44aa44";

仕様書

Specification
Intersection Observer
# dom-intersectionobserver-root

ブラウザーの互換性

BCD tables only load in the browser

関連情報