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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
intersectionRatio

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support