IntersectionObserverEntry: intersectionRatio Eigenschaft

Baseline Weitgehend verfgbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Gerten und in vielen Browserversionen. Sie ist seit Mrz 2019 browserbergreifend verfgbar.

Mehr erfahren
Vollstndige Kompatibilitt anzeigen

Die intersectionRatio schreibgeschtzte Eigenschaft der IntersectionObserverEntry Schnittstelle gibt an, wie viel des Zielelements derzeit innerhalb des Intersektionverhltnisses 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 tatschlich innerhalb des Schnittrechtecks der Wurzel sichtbar ist. Genauer gesagt, dieser Wert ist das Verhltnis der Flche des Schnittrechtecks (intersectionRect) zur Flche des Begrenzungsrechtecks des Ziels (boundingClientRect).

Wenn die Flche des Begrenzungsrechtecks des Ziels null ist, wird der Wert 1 zurckgegeben, wenn isIntersecting true ist, oder 0, wenn nicht.

Beispiele

In diesem einfachen Beispiel setzt ein Schnittpunkt-Callback die opacity jedes Zielelements auf das Schnittverhltnis 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

Browser-Kompatibilitt

Help improve MDN

War diese bersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen knnen Diese Seite wurde automatisch aus dem Englischen bersetzt.

bersetzung auf GitHub anzeigen Fehler mit dieser bersetzung melden

Intersection Observer API
IntersectionObserverEntry
Konstruktor
1. IntersectionObserverEntry()
Instanzeigenschaften
Verwandte Seiten fr Intersection Observer API
1. IntersectionObserver
Anleitungen
1. Timing element visibility with the Intersection Observer API