IntersectionObserverEntry: intersectionRect-Eigenschaft
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.
Die IntersectionObserverEntry
-Schnittstelle hat eine schreibgeschützte intersectionRect
-Eigenschaft, die ein DOMRectReadOnly
-Objekt darstellt. Dieses Objekt beschreibt das kleinste Rechteck, das den gesamten Bereich des Zielelements enthält, das derzeit innerhalb des Schnittwurzelbereichs sichtbar ist.
Wert
Ein DOMRectReadOnly
, das den Teil des Zielelements beschreibt, der derzeit innerhalb des Schnittwurzelrechtecks sichtbar ist.
Dieses Rechteck wird berechnet, indem der Schnitt von boundingClientRect
mit jedem der Clip-Rechtecke der target
-Vorfahren genommen wird, mit Ausnahme der Schnittwurzel selbst.
Beispiele
In diesem einfachen Beispiel speichert ein Schnittcallback das Schnittrechteck zur späteren Verwendung durch den Code, der den Inhalt der Zielelemente zeichnet, sodass nur der sichtbare Bereich neu gezeichnet wird.
function intersectionCallback(entries) {
entries.forEach((entry) => {
refreshZones.push({
element: entry.target,
rect: entry.intersectionRect,
});
});
}
Spezifikationen
Specification |
---|
Intersection Observer # dom-intersectionobserverentry-intersectionrect |
Browser-Kompatibilität
BCD tables only load in the browser