IntersectionObserverEntry: isIntersecting-Eigenschaft

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.

Die schnittstellenübergreifende, schreibgeschützte isIntersecting-Eigenschaft der IntersectionObserverEntry gibt einen booleschen Wert zurück, der true ist, wenn das Ziel-Element mit dem Wurzel-Element des Intersection Observers schneidet. Ist dieser Wert true, beschreibt der IntersectionObserverEntry einen Übergang in einen Zustand der Überschneidung; ist er false, wissen Sie, dass der Übergang von überschneidend zu nicht-überschneidend erfolgt.

Wert

Ein boolescher Wert, der angibt, ob das target-Element in einen Zustand der Überschneidung (true) eingetreten ist oder aus einem Zustand der Überschneidung (false) herausgegangen ist.

Beispiele

In diesem einfachen Beispiel wird ein Überschneidungs-Callback verwendet, um einen Zähler zu aktualisieren, der anzeigt, wie viele Ziel-Elemente derzeit mit der Schnittwurzel im Überschneidungsbereich liegen.

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

Um ein konkretes Beispiel zu sehen, werfen Sie einen Blick auf Behandlung von Überschneidungsänderungen.

Spezifikationen

Specification
Intersection Observer
# dom-intersectionobserverentry-isintersecting

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
isIntersecting

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support