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

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

// 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

BCD tables only load in the browser

Siehe auch

IntersectionObserver.unobserve()