IntersectionObserverEntry: intersectionRatio プロパティ
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月.
IntersectionObserverEntry インターフェイスの読み取り専用の intersectionRatio プロパティは、対象の要素が現在どの程度見えているかを、ルートの交差比率で 0.0 から 1.0 の間の値で示します。
値
0.0 から 1.0 の間の数値で、対象要素がルートの交差矩形内で実際にどの程度表示されているかを示します。
より正確には、この値は交差矩形の面積 (intersectionRect) と対象の外接矩形の面積 (boundingClientRect) の比になります。
対象の外接矩形の面積が 0 の場合、 isIntersecting が true ならば 1、そうでないならば 0 が返されます。
例
この単純な例では、交差コールバックはそれぞれの対象要素の opacity を、その要素とルートとの交差比率に設定します。
js
function intersectionCallback(entries) {
entries.forEach((entry) => {
entry.target.style.opacity = entry.intersectionRatio;
});
}
より具体的な例については、交差状態の変化の扱いをご覧ください。
仕様書
| Specification |
|---|
| Intersection Observer # dom-intersectionobserverentry-intersectionratio |
ブラウザーの互換性
Loading…