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.

js
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