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, asynchron Änderungen des Schnittpunkts eines Zielelements mit einem Vorfahrenelement oder mit dem Viewport eines obersten Dokuments zu beobachten. Das Vorfahrenelement oder der Viewport wird als Wurzel bezeichnet.

Wenn ein IntersectionObserver erstellt wird, ist 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 bestimmtes Beobachterobjekt nur nützlich ist, um spezifische Änderungen im Sichtbarkeitsgrad zu beobachten; es können jedoch mehrere Zielelemente mit demselben Beobachter beobachtet werden.

Konstruktor

IntersectionObserver(): Erstellt ein neues IntersectionObserver-Objekt, das eine angegebene Rückruffunktion ausführt, wenn es feststellt, dass die Sichtbarkeit eines Zielelements einen oder mehrere Schwellenwerte überschritten hat.

Instanz-Eigenschaften

IntersectionObserver.delay Schreibgeschützt: Eine ganze Zahl, die die minimale Verzögerung zwischen den Benachrichtigungen von diesem Beobachter angibt.
IntersectionObserver.root Schreibgeschützt: Das Element oder das Document, dessen Grenzen als Rahmen bei der Überprüfung von Überschneidungen verwendet werden. Wenn dem Konstruktor kein root-Wert übergeben wurde oder dessen Wert null ist, wird der Viewport des obersten Dokuments verwendet.
IntersectionObserver.rootMargin Schreibgeschützt: Ein Versatz-Rechteck, das auf den Umgrenzungsrahmen der Wurzel angewendet wird, wenn Überschneidungen berechnet werden, wodurch die Wurzel für Berechnungszwecke effektiv verkleinert oder vergrößert wird. Der durch diese Eigenschaft zurückgegebene Wert muss nicht identisch mit dem beim Aufrufen des Konstruktors angegebenen Wert sein, da er möglicherweise an interne Anforderungen angepasst wird. Jeder Versatz kann in Pixeln (px) oder als Prozentsatz (%) ausgedrückt werden. Der Standardwert ist "0px 0px 0px 0px".
IntersectionObserver.scrollMargin Schreibgeschützt: Ein Versatz-Rechteck, das auf jeden Scrollcontainer auf dem Pfad von der Schnittwurzel zum Ziel angewendet wird, wodurch die Clip-Rechtecke, die zur Berechnung der Überschneidungen verwendet werden, effektiv verkleinert oder vergrößert werden. Der durch diese Eigenschaft zurückgegebene Wert kann vom beim Aufrufen des Konstruktors angegebenen Wert abweichen.
IntersectionObserver.thresholds Schreibgeschützt: Eine Liste von Schwellenwerten, die in aufsteigender numerischer Reihenfolge sortiert sind, wobei jeder Schwellenwert ein Verhältnis der Schnittfläche zur Umgrenzungsrahmenfläche eines beobachteten Ziels ist. Benachrichtigungen für ein Ziel werden generiert, wenn einer der Schwellenwerte für dieses Ziel überschritten wird. Wenn dem Konstruktor kein Wert übergeben wurde, wird 0 verwendet.
IntersectionObserver.trackVisibility Schreibgeschützt: Ein boolescher Wert, der angibt, ob dieser IntersectionObserver überprüft, ob das Ziel über eine einwandfreie Sichtbarkeit verfügt.

Instanz-Methoden

IntersectionObserver.disconnect(): Stoppt das IntersectionObserver-Objekt beim Beobachten sämtlicher Ziele.
IntersectionObserver.observe(): Teilt dem IntersectionObserver ein Zielelement mit, das beobachtet werden soll.
IntersectionObserver.takeRecords(): Gibt ein Array von IntersectionObserverEntry-Objekten für alle beobachteten Ziele zurück.
IntersectionObserver.unobserve(): Teilt dem IntersectionObserver mit, die Beobachtung eines bestimmten Zielelements 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