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 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.

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