IntersectionObserver: rootMargin プロパティ
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2019年3月.
rootMargin は IntersectionObserver インターフェイスの読み取り専用プロパティで、 CSS の margin プロパティと同じような構文の文字列です。
rootMargin で表される矩形の各辺は、交差判定が行われる前にルート要素 (root) の境界ボックス内で対応する辺に追加されます。
これにより、例えば、あるピクセル数の幅または高さが切り取られた場合でもターゲット要素が 100% 表示されるように境界を外側に調整したり、端がルートの境界ボックスの端に近すぎる場合、ターゲットを部分的に非表示として扱ったりすることができます。
ルートマージンについて、またルートの境界ボックスとの間でどのように動作するかについて、より詳しくは交差の計算方法を参照してください。
値
CSS の margin プロパティの値と同様の書式化された文字列で、ルートの境界ボックスの一つ以上の辺のためのオフセットを含みます。これらのオフセットは、結果の矩形と対象要素の境界との間の交差の前に、ルートの境界ボックス内の対応する値に追加されます。
このプロパティが返す文字列は、 IntersectionObserver がインスタンス化されたときに指定された文字列と一致しない場合があります
例えば、結果は常に、入力が少ない場合でも 4 つの要素が含まれています。
オブジェクトのインスタンス化時に rootMargin が指定されていない場合、既定では文字列 "0px 0px 0px 0px" となります。これは、ルート要素の変更されていない境界矩形と対象の境界線との交点を計算することを意味します。
交差の計算方法では、 rootMargin がどのように使用されるか、より詳細に説明しています。
仕様書
| Specification |
|---|
| Intersection Observer # dom-intersectionobserver-rootmargin |
ブラウザーの互換性
Loading…