DerIntersectionObserver() Konstruktor erstellt und liefert ein neuesIntersectionObserver-Objekt.

Syntax

new IntersectionObserver(callback)new IntersectionObserver(callback, options)

Parameter

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 vonIntersectionObserverEntry-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 vorzugsweiseIntersectionObserverEntry.time verwenden, um sie korrekt zu ordnen.

observer

DerIntersectionObserver, für den der Callback aufgerufen wird.

optionsOptional

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.

WenntrackVisibilitytrue 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

EinElement oderDocument-Objekt, welches ein Vorfahre des beabsichtigten Ziels ist, dessen Begrenzungsrechteck als Viewport betrachtet wird.Jeder Teil des Ziels, der im sichtbaren Bereich desroot nicht sichtbar ist, wird nicht als sichtbar betrachtet.Wenn nicht angegeben, verwendet der Beobachter den Viewport des Dokumentsals 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 dembounding_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 CSSmargin-Eigenschaft;sieheDer 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 jedemscroll 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 wierootMargin.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.SieheSchwellenwerte 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.

Wenntrue, ü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.Eindelay sollte auch gesetzt werden, wenn dieser Werttrue ist.Der Standardwert istfalse.

Rückgabewert

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

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

Ausnahmen

SyntaxErrorDOMException

Der angegebenerootMargin oderscrollMargin ist ungültig.

RangeError

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

Beispiele

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

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

Spezifikationen

Browser-Kompatibilität