IntersectionObserver: IntersectionObserver() Konstruktor

callback

Eine Funktion, die aufgerufen wird, wenn der Prozentsatz des sichtbaren Bereichs des Ziel-Elements einen Schwellenwert überschreitet. Der Callback erhält zwei Parameter als Eingabe:

entries

Ein Array von IntersectionObserverEntry-Objekten, die jeweils einen Schwellenwert repräsentieren, der überschritten wurde, sei es, dass der sichtbare Prozentsatz kleiner oder größer wird als der durch diesen Schwellenwert spezifizierte. Sie sollten die Anzahl der Einträge nicht annehmen, da mehrere Ereignisse des Überschreitens eines Schwellenwerts in einem einzelnen Callback-Aufruf gemeldet werden können. Die Einträge werden mithilfe einer Warteschlange verteilt, daher sollten sie nach der Zeit geordnet sein, zu der sie generiert wurden. Sie sollten jedoch vorzugsweise IntersectionObserverEntry.time verwenden, um sie korrekt zu ordnen.

observer

Der IntersectionObserver, für den der Callback aufgerufen wird.

options Optional

Ein optionales Objekt, das den Beobachter anpasst.

Sie können jede Kombination (oder keine) der folgenden Optionen angeben:

delay

Eine Zahl, die die minimale erlaubte Verzögerung zwischen Benachrichtigungen vom Beobachter in Millisekunden angibt.

Die Verzögerung wird verwendet, um die Häufigkeit der Benachrichtigungen zu begrenzen, wenn die Sichtbarkeit verfolgt wird, da dies eine rechenintensive Operation ist. Die Empfehlung beim Verfolgen der Sichtbarkeit ist, die Verzögerung auf den größtmöglichen tolerierbaren Wert zu setzen.

Wenn trackVisibility true ist, beträgt der Mindestwert 100. Der Browser setzt den Wert auf 100, wenn ein kleinerer Wert verwendet wird oder wenn der Wert nicht spezifiziert ist. Der Standardwert ist 0.

root

Ein Element oder Document-Objekt, welches ein Vorfahre des beabsichtigten Ziels ist, dessen Begrenzungsrechteck als Viewport betrachtet wird. Jeder Teil des Ziels, der im sichtbaren Bereich des root nicht sichtbar ist, wird nicht als sichtbar betrachtet. Wenn nicht angegeben, verwendet der Beobachter den Viewport des Dokuments als Root, ohne Rand, und einen Schwellenwert von 0% (dies bedeutet, dass bereits eine Änderung um einen Pixel ausreicht, um einen Callback auszulösen).

rootMargin

Ein String, der eine Reihe von Offsets angibt, die dem bounding_box des Root hinzugefügt werden, um Schnittpunkte zu berechnen, was effektiv den Root zum Zweck der Berechnung schrumpfen oder erweitern kann. Jeder Offset-Wert kann nur in Pixeln (px) oder Prozent (%) ausgedrückt werden. Die Syntax ist ungefähr dieselbe wie die der CSS margin-Eigenschaft; siehe Der Schnittpunkt-Root und root margin für weitere Informationen darüber, wie der Rand funktioniert und die Syntax. Der Standardwert ist "0px 0px 0px 0px".

scrollMargin

Ein String, der die Offsets angibt, die jedem scroll container auf dem Pfad zum Ziel hinzugefügt werden, um Schnittpunkte zu berechnen, was effektiv die Clip-Rechtecke schrumpfen oder erweitern kann, die zum Berechnen der Schnittpunkte verwendet werden. Dies ermöglicht beispielsweise eine bessere Beobachtung von Zielen innerhalb geschachtelter Scroll-Container, die derzeit von den Scroll-Containern abgeschnitten sind. Die Syntax ist dieselbe wie rootMargin. Der Standardwert ist "0px 0px 0px 0px".

threshold

Entweder eine einzelne Zahl oder ein Array von Zahlen zwischen 0,0 und 1,0, die das Verhältnis der Schnittfläche zur Gesamtfläche der Bounding-Box des beobachteten Ziels angibt. Ein Wert von 0,0 bedeutet, dass bereits ein einzelner sichtbarer Pixel als "sichtbar" des Ziels zählt. 1,0 bedeutet, dass das gesamte Ziel-Element sichtbar ist. Siehe Schwellenwerte für eine ausführlichere Beschreibung der Verwendung von Schwellenwerten. Der Standardwert ist ein Schwellenwert von "0".

trackVisibility

Ein Boolean, der angibt, ob der Beobachter die Sichtbarkeit verfolgen soll.

Wenn true, überprüft der Browser, dass das Ziel keine eingeschränkte Sichtbarkeit aufweist, wenn Schnittpunkte berechnet werden; beispielsweise, dass es nicht von anderen Elementen bedeckt ist oder möglicherweise durch einen Filter, verminderte Deckkraft oder eine Transformation verzerrt oder versteckt wurde.

Das Verfolgen der Sichtbarkeit ist eine teure Operation und sollte nur durchgeführt werden, wenn notwendig. Ein delay sollte auch gesetzt werden, wenn dieser Wert true ist. Der Standardwert ist false.

Ein neuer IntersectionObserver, der verwendet werden kann, um die Sichtbarkeit eines Ziel-Elements innerhalb des spezifizierten root zu beobachten, das durch einen der spezifizierten Sichtbarkeits-thresholds geht.

Rufen Sie die observe()-Methode auf, um mit der Beobachtung der Sichtbarkeitsänderungen eines bestimmten Ziels zu beginnen.

SyntaxError DOMException

Der angegebene rootMargin oder scrollMargin ist ungültig.

RangeError

Einer oder mehrere Werte in threshold sind außerhalb des Bereichs von 0,0 bis 1,0.

Dieses Beispiel erstellt einen neuen IntersectionObserver, der die Funktion myObserverCallback jedes Mal aufruft, wenn sich der sichtbare Bereich des beobachteten Elements um mindestens 10% ändert.

let observer = new IntersectionObserver(myObserverCallback, { threshold: 0.1 });