IntersectionObserverEntry: intersectionRatio プロパティ

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2019年3月以降、すべてのブラウザーで利用可能です。

intersectionRatio は IntersectionObserverEntry インターフェイスの読み取り専用のプロパティで、対象の要素が現在どの程度見えているかを、ルートの交差比率で 0.0 から 1.0 の間の値で示します。

値

0.0 から 1.0 の間の数値で、対象要素がルートの交差矩形内で実際にどの程度表示されているかを示します。より正確には、この値は交差矩形の面積 (intersectionRect) と対象の外接矩形の面積 (boundingClientRect) の比になります。

対象の外接矩形の面積が 0 の場合、 isIntersecting が true ならば 1、そうでないならば 0 が返されます。

この単純な例では、交差コールバックはそれぞれの対象要素の opacity を、その要素とルートとの交差比率に設定します。

function intersectionCallback(entries) {
 entries.forEach((entry) => {
 entry.target.style.opacity = entry.intersectionRatio;
 });
}

より具体的な例については、交差状態の変化の扱いをご覧ください。

仕様書
Intersection Observer # dom-intersectionobserverentry-intersectionratio

このページは MDN の貢献者によって 2025年9月17日に最終更新されました。