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.

In diesem Artikel

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.

js
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-Kompatibilität

JavaScript aktivieren, um diese Browser-Kompatibilitätstabelle anzuzeigen.

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können 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 für Intersection Observer API
1. IntersectionObserver
Anleitungen
1. Timing element visibility with the Intersection Observer API