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.

Das IntersectionObserver Interface der Intersection Observer API bietet eine Möglichkeit, Änderungen in der Überschneidung eines Zielelements mit einem Vorfahrenelement oder mit dem Ansichtsbereich (viewport) eines obersten Dokuments asynchron zu beobachten. Das Vorfahrenelement oder der Ansichtsbereich wird als Wurzel (root) bezeichnet.

Wenn ein IntersectionObserver erstellt wird, wird er so konfiguriert, dass er für bestimmte Verhältniswerte der Sichtbarkeit innerhalb der Wurzel beobachtet. Die Konfiguration kann nach der Erstellung des IntersectionObserver nicht geändert werden, daher ist ein Beobachterobjekt nur nützlich, um spezifische Änderungen des Sichtbarkeitsgrades zu überwachen; Sie können jedoch mehrere Zielelemente mit dem gleichen Beobachter beobachten.

Konstruktor

IntersectionObserver()

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

Instanz-Eigenschaften

IntersectionObserver.root Schreibgeschützt

Das Element oder Document, dessen Grenzen als Umgrenzungsrahmen beim Testen der Überschneidung verwendet werden. Wenn kein root-Wert an den Konstruktor übergeben wurde oder dessen Wert null ist, wird der Ansichtsbereich des obersten Dokuments verwendet.

IntersectionObserver.rootMargin Schreibgeschützt

Ein Offset-Rechteck, das auf den Umgrenzungsrahmen der Wurzel angewendet wird, wenn Überschneidungen berechnet werden, wodurch die Wurzel effektiv verkleinert oder vergrößert wird. Der von dieser Eigenschaft zurückgegebene Wert kann nicht derselbe sein, der beim Aufruf des Konstruktors angegeben wurde, da er möglicherweise an interne Anforderungen angepasst wird. Jedes Offset kann in Pixeln (px) oder als Prozentsatz (%) ausgedrückt werden. Der Standardwert ist "0px 0px 0px 0px".

IntersectionObserver.thresholds Schreibgeschützt

Eine Liste von Schwellenwerten, sortiert in aufsteigender numerischer Reihenfolge, wobei jeder Schwellenwert ein Verhältnis der Überschneidungsflä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 kein Wert an den Konstruktor übergeben wurde, wird 0 verwendet.

Instanz-Methoden

IntersectionObserver.disconnect()

Stoppt das IntersectionObserver Objekt von der Beobachtung eines Ziels.

IntersectionObserver.observe()

Teilt dem IntersectionObserver mit, ein Zielelement zu beobachten.

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

js
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

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch