IntersectionObserver

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.

* Some parts of this feature may have varying levels of support.

Das IntersectionObserver-Interface der Intersection Observer API bietet eine Möglichkeit, Änderungen in der Überschneidung eines Ziel-Elements mit einem übergeordneten Element oder mit einem Dokument auf oberster Ebene zu beobachten. Das übergeordnete Element oder der Viewport wird als Wurzel bezeichnet.

Wenn ein IntersectionObserver erstellt wird, wird er so konfiguriert, dass er auf bestimmte Sichtbarkeitsverhältnisse innerhalb der Wurzel achtet. Die Konfiguration kann nicht geändert werden, nachdem der IntersectionObserver erstellt wurde, sodass ein konkretes Beobachterobjekt nur nützlich ist, um spezifische Änderungen im Sichtbarkeitsgrad zu beobachten; Sie können jedoch mehrere Ziel-Elemente mit demselben Beobachter beobachten.

Konstruktor

IntersectionObserver(): Erstellt ein neues IntersectionObserver-Objekt, das eine angegebene Callback-Funktion ausführt, wenn es erkennt, dass die Sichtbarkeit eines Ziel-Elements einen oder mehrere Schwellenwerte überschritten hat.

Instanz-Eigenschaften

IntersectionObserver.delay Schreibgeschützt Experimentell: Eine ganze Zahl, die die minimale Verzögerung zwischen Benachrichtigungen dieses Beobachters angibt.
IntersectionObserver.root Schreibgeschützt: Das Element oder Document, dessen Begrenzungen als Begrenzungsrahmen bei der Überprüfung von Überschneidungen verwendet werden. Wenn dem Konstruktor kein root-Wert übergeben wurde oder sein Wert null ist, wird der Viewport des Dokuments auf oberster Ebene verwendet.
IntersectionObserver.rootMargin Schreibgeschützt: Ein Versatzrechteck, das auf den Begrenzungsrahmen der Wurzel angewendet wird, wenn Überschneidungen berechnet werden, um ihn effektiv zu verkleinern oder zu vergrößern. Der von dieser Eigenschaft zurückgegebene Wert kann von dem bei der Konstruktoraufruf angegebenen Wert abweichen, da er an interne Anforderungen angepasst werden kann. Jeder Versatz kann in Pixeln (px) oder Prozent (%) angegeben werden. Der Standardwert ist "0px 0px 0px 0px".
IntersectionObserver.scrollMargin Schreibgeschützt: Ein Versatzrechteck, das auf jeden Scrollcontainer auf dem Pfad von der Überschneidungswurzel zum Ziel angewendet wird, um die bei der Berechnung von Überschneidungen verwendeten Clipping-Rechtecke effektiv zu verkleinern oder zu vergrößern. Der von dieser Eigenschaft zurückgegebene Wert kann von dem bei der Konstruktoraufruf angegebenen Wert abweichen.
IntersectionObserver.thresholds Schreibgeschützt: Eine Liste von Schwellenwerten, sortiert in aufsteigender numerischer Reihenfolge, wobei jeder Schwellenwert das Verhältnis der Überschneidungsfläche zur Begrenzungsrahmenfläche eines beobachteten Ziels darstellt. Benachrichtigungen für ein Ziel werden generiert, wenn einer dieser Schwellenwerte für dieses Ziel überschritten wird. Wenn dem Konstruktor kein Wert übergeben wurde, wird 0 verwendet.
IntersectionObserver.trackVisibility Schreibgeschützt Experimentell: Ein boolescher Wert, der angibt, ob dieser IntersectionObserver überprüft, dass das Ziel keine beeinträchtigte Sichtbarkeit hat.

Instanz-Methoden

IntersectionObserver.disconnect(): Stoppt das IntersectionObserver-Objekt darin, irgendein Ziel zu beobachten.
IntersectionObserver.observe(): Gibt dem IntersectionObserver ein Ziel-Element an, das beobachtet werden soll.
IntersectionObserver.takeRecords(): Gibt ein Array von IntersectionObserverEntry-Objekten für alle beobachteten Ziele zurück.
IntersectionObserver.unobserve(): Gibt dem IntersectionObserver an, die Beobachtung eines bestimmten Ziel-Elements zu stoppen.

Beispiele

const intersectionObserver = new IntersectionObserver((entries) => {
  // If intersectionRatio is 0, the target is out of view
  // and we do not need to do anything.
  if (entries[0].intersectionRatio <= 0) return;

  loadItems(10);
  console.log("Loaded new items");
});
// start observing
intersectionObserver.observe(document.querySelector(".scrollerFooter"));

Spezifikationen

Specification
Intersection Observer # intersection-observer-interface