IntersectionObserverEntry: IntersectionObserverEntry() Konstruktor
Eingeschränkt verfügbar
Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.
Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.
Der IntersectionObserverEntry() Konstruktor erstellt und gibt ein neues IntersectionObserverEntry-Objekt zurück.
Hinweis:
Im typischen Gebrauch müssen Sie diesen Konstruktor nicht selbst aufrufen. IntersectionObserverEntry-Objekte werden automatisch vom Browser erstellt und an den IntersectionObserver Callback übergeben, wenn eine Überschneidung beobachtet wird, oder von IntersectionObserver.takeRecords() zurückgegeben.
Syntax
new IntersectionObserverEntry(intersectionObserverEntryInit)
Parameter
intersectionObserverEntryInit-
Ein Objekt mit den folgenden Eigenschaften, die alle erforderlich sind:
boundingClientRect-
Ein Objekt, das die Position und Abmessungen des Begrenzungsrechtecks des Ziel-Elements mit den Eigenschaften
x,y,widthundheightangibt. Dies entspricht dem Rechteck, das vonElement.getBoundingClientRect()zurückgegeben wird. intersectionRatio-
Eine Zahl, die das Verhältnis des
intersectionRect-Bereichs zumboundingClientRect-Bereich darstellt. Wenn derboundingClientRect-Bereich null ist, beträgt dieses Verhältnis 1, wennisIntersectingtrueist, und 0, wenn nicht. intersectionRect-
Ein Objekt, das die Position und Abmessungen des sichtbaren Bereichs des Ziels innerhalb des Schnittrechtecks des Wurzels mit den Eigenschaften
x,y,widthundheightspezifiziert. isIntersecting-
Ein boolescher Wert, der
trueist, wenn das Ziel-Element mit dem Wurzel des Intersection Observer Überschneidungen hat, oderfalseansonsten. isVisible-
Ein boolescher Wert, der
trueist, wenn das Ziel-Element als vollständig sichtbar und nicht verdeckt bestimmt wurde, ohne visuelle Effekte, die seine Anzeige auf dem Bildschirm verändern würden. Ein Wert vonfalsebedeutet entweder, dass die Sichtbarkeit des Ziels beeinträchtigt ist, oder dass diese Bestimmung nicht getroffen werden konnte. rootBounds-
Ein Objekt, das die Position und Abmessungen des Schnittrechtecks des Wurzels mit den Eigenschaften
x,y,widthundheightangibt, odernull. target-
Das
Element, dessen Schnittmenge mit dem Wurzel verändert wurde. time-
Ein
DOMHighResTimeStamp, der die Zeit angibt, zu der die Überschneidung aufgezeichnet wurde, relativ zum time origin desIntersectionObserver.
Rückgabewert
Ein neues IntersectionObserverEntry-Objekt, dessen Eigenschaften auf die in intersectionObserverEntryInit angegebenen Werte initialisiert sind.
Beispiele
Erstellen eines IntersectionObserverEntry
Dieses Beispiel erstellt ein grundlegendes IntersectionObserverEntry, das ein vollständig sichtbares Element beschreibt. Während Sie einen Eintrag manuell auf diese Weise erstellen können, werden diese Objekte in der Praxis automatisch vom Browser erstellt und an Ihren IntersectionObserver Callback übergeben.
const entry = new IntersectionObserverEntry({
time: performance.now(),
rootBounds: { x: 0, y: 0, width: 1024, height: 768 },
boundingClientRect: { x: 10, y: 20, width: 200, height: 100 },
intersectionRect: { x: 10, y: 20, width: 200, height: 100 },
isIntersecting: true,
isVisible: false,
intersectionRatio: 1.0,
target: document.body,
});
Spezifikationen
| Spezifikation |
|---|
| Intersection Observer # dom-intersectionobserverentry-intersectionobserverentry |