IntersectionObserverEntry.intersectionRatio
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 |
ブラウザーの互換性
BCD tables only load in the browser