IntersectionObserver: observe() Methode

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit März 2019 browserübergreifend verfügbar.

Die observe() Methode des IntersectionObserver Interfaces fügt ein Element zur Menge der vom IntersectionObserver überwachten Zielelemente hinzu. Ein Observer hat einen Schwellenwertsatz und eine Wurzel, kann aber mehrere Zielelemente in Bezug auf Sichtbarkeitsänderungen überwachen.

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

Wenn die Sichtbarkeit des angegebenen Elements eine der Sichtbarkeitsschwellen des Observers (wie in IntersectionObserver.thresholds aufgelistet) überschreitet, wird der Callback des Observers mit einem Array von IntersectionObserverEntry Objekten ausgeführt, die die aufgetretenen Schnittänderungen darstellen. Es ist zu beachten, dass dieses Design es ermöglicht, die Schnittänderungen mehrerer Elemente durch einen einzigen Aufruf des Callbacks zu verarbeiten.

Hinweis: Der Callback des Observers wird immer im ersten Render-Zyklus nach dem Aufruf von observe() ausgelöst, selbst wenn sich das beobachtete Element in Bezug auf das Ansichtsfenster noch nicht bewegt hat. Das bedeutet, dass zum Beispiel ein Element, das sich außerhalb des Ansichtsfensters befindet, wenn observe() darauf angewendet wird, sofort den Callback mit mindestens einem Eintrag aufruft, bei dem intersecting auf false gesetzt ist. Ein Element innerhalb des Ansichtsfensters führt dazu, dass der Callback sofort mit mindestens einem Eintrag aufgerufen wird, bei dem intersecting auf true gesetzt ist.

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);
});

IntersectionObserver.unobserve()

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

Intersection Observer API
IntersectionObserver
Konstruktor
1. IntersectionObserver()
Instanzeigenschaften
Instanzmethoden
Verwandte Seiten für Intersection Observer API
1. IntersectionObserverEntry
Anleitungen
1. Timing element visibility with the Intersection Observer API

IntersectionObserver: observe() Methode

In diesem Artikel

Syntax

Parameter

Rückgabewert

Beispiele

Spezifikationen

Browser-Kompatibilität

Siehe auch

Help improve MDN