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
Nur lesbar-
Das
Element
oderDocument
, dessen Grenzen als Umgrenzungsrahmen beim Testen der Überschneidung verwendet werden. Wenn keinroot
-Wert an den Konstruktor übergeben wurde oder dessen Wertnull
ist, wird der Ansichtsbereich des obersten Dokuments verwendet. IntersectionObserver.rootMargin
Nur lesbar-
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
Nur lesbar-
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
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