IntersectionObserverEntry: intersectionRatio 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 intersectionRatio schreibgeschützte Eigenschaft der IntersectionObserverEntry Schnittstelle gibt an, wie viel des Zielelements derzeit innerhalb des Intersektionverhältnisses der Wurzel sichtbar ist, als ein Wert zwischen 0,0 und 1,0.

Wert

Eine Zahl zwischen 0,0 und 1,0, die angibt, wie viel des Zielelements tatsächlich innerhalb des Schnittrechtecks der Wurzel sichtbar ist. Genauer gesagt, dieser Wert ist das Verhältnis der Fläche des Schnittrechtecks (intersectionRect) zur Fläche des Begrenzungsrechtecks des Ziels (boundingClientRect).

Wenn die Fläche des Begrenzungsrechtecks des Ziels null ist, wird der Wert 1 zurückgegeben, wenn isIntersecting true ist, oder 0, wenn nicht.

Beispiele

In diesem einfachen Beispiel setzt ein Schnittpunkt-Callback die opacity jedes Zielelements auf das Schnittverhältnis dieses Elements mit der Wurzel.

js
function intersectionCallback(entries) {
  entries.forEach((entry) => {
    entry.target.style.opacity = entry.intersectionRatio;
  });
}

Um ein konkreteres Beispiel zu sehen, schauen Sie sich Umgang mit Änderungsbenachrichtigungen von Schnittpunkten an.

Spezifikationen

Specification
Intersection Observer
# dom-intersectionobserverentry-intersectionratio

Browser-Kompatibilität