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 März 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.
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
Loading…