IntersectionObserver: IntersectionObserver()-Konstruktor

callback

Eine Funktion, die aufgerufen wird, wenn der Prozentsatz des Sichtbaren des Zielelements einen Schwellenwert überschreitet. Der Rückruf erhält zwei Parameter als Eingabe:

entries

Ein Array von IntersectionObserverEntry-Objekten, die jeweils einen überschrittenen Schwellenwert darstellen, der entweder sichtbarer oder weniger sichtbar ist als der durch diesen Schwellenwert angegebene Prozentsatz. Sie sollten die Anzahl der Einträge nicht annehmen, da mehrere Ereignisse, die den Schwellenwert überschreiten, in einem einzigen Rückruf gemeldet werden können. Die Einträge werden über eine Warteschlange verteilt, sodass sie in der Reihenfolge angeordnet sein sollten, in der sie erzeugt wurden. Sie sollten jedoch vorzugsweise IntersectionObserverEntry.time verwenden, um sie korrekt zu ordnen.

observer

Der IntersectionObserver, für den der Rückruf aufgerufen wird.

options Optional

Ein optionales Objekt, das den Beobachter anpasst. Alle Eigenschaften sind optional. Sie können jede Kombination der folgenden Optionen bereitstellen:

root

Ein Element- oder Document-Objekt, das ein Vorfahre des beabsichtigten Ziels ist, dessen Begrenzungsrechteck als Ansichtsbereich betrachtet wird. Jeder Teil des Ziels, der im sichtbaren Bereich der root nicht sichtbar ist, wird nicht als sichtbar betrachtet. Falls nicht angegeben, verwendet der Beobachter den Ansichtsbereich des Dokuments als Root, ohne Rand und einem Schwellenwert von 0% (was bedeutet, dass selbst eine Änderung um einen einzigen Pixel ausreicht, um einen Rückruf auszulösen).

rootMargin

Eine Zeichenkette, die eine Reihe von Offsets angibt, die zur Berechnung von Schnittpunkten zum bounding_box der Root hinzugefügt werden, wodurch die Root für Berechnungszwecke effektiv verkleinert oder vergrößert wird. Die Syntax ist ungefähr die gleiche wie für die CSS-margin-Eigenschaft; siehe The intersection root and root margin für weitere Informationen über die Funktionsweise und Syntax des Randes. Der Standardwert ist "0px 0px 0px 0px".

threshold

Entweder eine einzelne Zahl oder ein Array von Zahlen zwischen 0.0 und 1.0, die ein Verhältnis des Schnittflächenbereichs zur Gesamtfläche des Begrenzungsrechtecks für das beobachtete Ziel angeben. Ein Wert von 0.0 bedeutet, dass selbst ein einziges sichtbares Pixel zählt, als ob das Ziel sichtbar wäre. 1.0 bedeutet, dass das gesamte Zielelement sichtbar ist. Siehe Thresholds für eine ausführlichere Beschreibung der Verwendung von Schwellenwerten. Der Standardwert ist ein Schwellenwert von 0.0.

Ein neuer IntersectionObserver, der verwendet werden kann, um die Sichtbarkeit eines Zielelements innerhalb der angegebenen root zu überwachen, die durch einen der angegebenen Sichtbarkeits-thresholds überschritten wird. Rufen Sie seine observe()-Methode auf, um mit der Überwachung der Sichtbarkeitsänderungen eines bestimmten Ziels zu beginnen.

SyntaxError DOMException

Das angegebene rootMargin ist ungültig.

RangeError

Einer oder mehrere der Werte in threshold liegen außerhalb des Bereichs von 0.0 bis 1.0.

Dieses Beispiel erstellt einen neuen Intersection Observer, 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 });