IntersectionObserver: observe() Methode

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 Methode IntersectionObserver observe() fügt ein Element zur Menge der durch den IntersectionObserver überwachten Ziel-Elemente hinzu. Ein Observer hat eine Menge von Schwellenwerten und eine Root, kann aber mehrere Ziel-Elemente auf Sichtbarkeitsänderungen beobachten, die mit diesen übereinstimmen.

Um die Beobachtung des Elements zu stoppen, rufen Sie IntersectionObserver.unobserve() auf.

Wenn die Sichtbarkeit des angegebenen Elements eine der Sichtbarkeits-Schwellenwerte des Observers überschreitet (wie in IntersectionObserver.thresholds aufgeführt), wird der Callback des Observers mit einem Array von IntersectionObserverEntry-Objekten ausgeführt, die die stattgefundenen Schnittänderungen darstellen. Beachten Sie, dass dieses Design es ermöglicht, Schnittänderungen mehrerer Elemente durch einen einzigen Aufruf des Callbacks zu verarbeiten.

Hinweis: Der Beobachter Callback wird immer im ersten Render-Zyklus ausgelöst, nachdem observe() aufgerufen wird, auch wenn sich das beobachtete Element noch nicht im Verhältnis zum Viewport bewegt hat. Dies bedeutet, dass beispielsweise ein Element, das außerhalb des Viewports ist, wenn observe() darauf aufgerufen wird, dazu führt, dass der Callback sofort mit mindestens einem Eintrag aufgerufen wird, bei dem intersecting auf false gesetzt ist. Ein Element innerhalb des Viewports führt dazu, dass der Callback sofort mit mindestens einem Eintrag aufgerufen wird, bei dem intersecting auf true gesetzt ist.

Syntax

js
observe(targetElement)

Parameter

targetElement

Ein Element, dessen Sichtbarkeit innerhalb der Root überwacht werden soll. Dieses Element muss ein Nachfahre des Root-Elements sein (oder im aktuellen Dokument enthalten sein, wenn die Root der Viewport des Dokuments ist).

Rückgabewert

Keiner (undefined).

Beispiele

js
// Register IntersectionObserver
const io = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.intersectionRatio > 0) {
      // Add 'active' class if observation target is inside viewport
      entry.target.classList.add("active");
    } else {
      // Remove 'active' class otherwise
      entry.target.classList.remove("active");
    }
  });
});

// Declares what to observe, and observes its properties.
const boxElList = document.querySelectorAll(".box");
boxElList.forEach((el) => {
  io.observe(el);
});

Spezifikationen

Specification
Intersection Observer
# dom-intersectionobserver-observe

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
observe

Legend

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

Full support
Full support

Siehe auch