IntersectionObserverEntry: isIntersecting プロパティ

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2019.

IntersectionObserverEntry インターフェイスの読み取り専用の isIntersecting プロパティは、対象要素が交差オブザーバーのルートと交差している場合に true になる論理値です。この値が true の場合、 IntersectionObserverEntry は交差状態への変わり目にあります。 false の場合、交差ありから交差なしへの変わり目であることがわかります。

値

論理値で、 target 要素が交差状態に遷移したか (true) または交差状態から脱したか (false) を示します。

例

この単純な例では、交差コールバックを使用して、現在いくつの対象となる要素が交差ルートと交差しているかのカウンターを更新します。

js
function intersectionCallback(entries) {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      intersectingCount += 1;
    } else {
      intersectingCount -= 1;
    }
  });
}

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

仕様書

Specification
Intersection Observer
# dom-intersectionobserverentry-isintersecting

ブラウザーの互換性

BCD tables only load in the browser