IntersectionObserverEntry: intersectionRect-Eigenschaft
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit März 2019 browserübergreifend verfügbar.
Die intersectionRect-Eigenschaft der IntersectionObserverEntry-Schnittstelle ist ein schreibgeschütztes DOMRectReadOnly-Objekt, das das kleinste Rechteck beschreibt, das den gesamten Teil des Zielelements enthält, der derzeit innerhalb der Schnittfläche sichtbar ist.
Wert
Ein DOMRectReadOnly, das den Teil des Zielelements beschreibt, der innerhalb des Schnittflächen-Rechtecks der Wurzel derzeit sichtbar ist.
Dieses Rechteck wird berechnet, indem der Schnitt von boundingClientRect mit jedem der Clip-Rechtecke der Vorfahren des target ermittelt wird, mit Ausnahme der Schnittfläche der root selbst.
Beispiele
In diesem einfachen Beispiel speichert ein Schnittmengen-Callback das Schnittflächen-Rechteck zur späteren Verwendung durch den Code, der den Inhalt der Zielelemente zeichnet, so dass nur der sichtbare Bereich neu gezeichnet wird.
function intersectionCallback(entries) {
entries.forEach((entry) => {
refreshZones.push({
element: entry.target,
rect: entry.intersectionRect,
});
});
}
Spezifikationen
| Spezifikation |
|---|
| Intersection Observer # dom-intersectionobserverentry-intersectionrect |