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
を識別します。
もし root
が null
であれば、実際の文書のビューポートの境界が使用されます。
値
Element
または Document
オブジェクトで、この外接ボックスが、対象要素のどの程度が見えるかを決定するためのビューポートの境界として使用されます。
この外接矩形が IntersectionObserver()
コンストラクターに渡されたオプションで指定されたマージンによってオフセットされたものと、対象要素の、対象要素に重なる全ての要素または他のオブジェクトの境界を引いた交差部分が、対象要素の可視領域と見なされます。
もし root
が null
であれば、自分の文書をルートとして使用し、そのビューポートの境界(つまり、文書の可視領域)をルート境界として使用します。
例
この例では、交差オブザーバのルート要素の border
を、 2 ピクセルの中緑色の線に設定しています。
js
observer.root.style.border = "2px solid #44aa44";
仕様書
Specification |
---|
Intersection Observer # dom-intersectionobserver-root |
ブラウザーの互換性
BCD tables only load in the browser