このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

IntersectionObserverEntry: target プロパティ

Baseline 広く利用可能

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

targetIntersectionObserverEntry インターフェイスの読み取り専用プロパティで、交差ルートとの交差量が変化したのがどの対象要素であるかを Element で示します。

IntersectionObserverEntrytarget プロパティは、以前に IntersectionObserver.observe() を呼び出して対象とした Element の中で、ルートとの交差量が変化したものを示します。

この単純な例では、対象となるそれぞれの要素の opacity が、その intersectionRatio に設定されます。

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

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

仕様書

仕様書
Intersection Observer
# dom-intersectionobserverentry-target

ブラウザーの互換性