IntersectionObserverEntry: intersectionRatio Eigenschaft
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit März 2019 browserübergreifend verfügbar.
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.
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
| Spezifikation |
|---|
| Intersection Observer # dom-intersectionobserverentry-intersectionratio |