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 schreibgeschützte intersectionRatio-Eigenschaft des IntersectionObserverEntry-Interfaces gibt an, wie viel vom Zielelement derzeit innerhalb des Schnittmengenverhältnisses des Wurzels sichtbar ist, als ein Wert zwischen 0,0 und 1,0.

Wert

Eine Zahl zwischen 0,0 und 1,0, die angibt, wie viel vom Zielelement tatsächlich innerhalb des Schnittmengenrechtecks des Wurzels sichtbar ist. Genauer gesagt ist dieser Wert das Verhältnis der Fläche des Schnittmengenrechtecks (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 Schnittmengen-Callback die opacity jedes Zielelements auf das Schnittmengenverhältnis dieses Elements mit dem Wurzel.

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

Um ein konkreteres Beispiel zu sehen, werfen Sie einen Blick auf Umgang mit Schnittmengenänderungen.

Spezifikationen

Specification
Intersection Observer
# dom-intersectionobserverentry-intersectionratio

Browser-Kompatibilität

BCD tables only load in the browser