IntersectionObserver für scrollgesteuerte Effekte

Die IntersectionObserver-API überwacht effizient, ob ein oder mehrere Elemente in den Browser-Viewport oder in ein bestimmtes übergeordnetes Element hinein- oder daraus herausbewegt werden. Anders als Scroll-Listener, die bei jedem Pixel ausgelöst werden, ruft der Observer Ihren Callback nur auf, wenn das Element einen Schwellenwert überschreitet. Dadurch eignet er sich deutlich besser für scrollbasierte Effekte.

Der Callback erhält ein Array aus IntersectionObserverEntry-Objekten, eines pro überwachtem Element. Jeder Eintrag enthält einen booleschen Wert isIntersecting (true, wenn das Element sichtbar ist) und eine Zahl intersectionRatio zwischen 0 und 1 (der Anteil des Elements, der aktuell sichtbar ist). Verwenden Sie diese Werte, um den Sichtbarkeitsstatus zu bestimmen.

Erstellen Sie den Observer innerhalb eines useEffect und rufen Sie observer.observe(ref.current) auf, um die Überwachung des Elements zu starten. Die Ref muss an das DOM-Element angehängt sein, das Sie verfolgen möchten. Erstellen Sie den Observer erst nach dem Mounten der Komponente, damit ref.current gesetzt ist.

Rufen Sie in der Cleanup-Funktion von useEffect observer.unobserve(element) auf, um die Überwachung eines bestimmten Elements zu beenden, oder observer.disconnect(), um alle Überwachungen zu beenden. Wenn Sie das Cleanup vergessen, bleibt der Observer nach dem Unmounten der Komponente bestehen, was möglicherweise Fehler oder Speicherlecks verursacht.

Die Option threshold legt fest, wann der Callback ausgelöst wird. Ein Wert von 0 löst ihn aus, sobald ein Pixel des Elements sichtbar ist. Ein Wert von 1 löst ihn erst aus, wenn das Element vollständig sichtbar ist. Sie können auch ein Array wie [0, 0.5, 1] übergeben, um bei mehreren Sichtbarkeitsstufen Callbacks zu erhalten.

rootMargin erweitert oder verkleinert den effektiven Schnittbereich mithilfe einer CSS-ähnlichen Syntax: '100px 0px' löst den Callback 100 px aus, bevor das Element in den Viewport eintritt. Verwenden Sie '-100px', um ihn erst auszulösen, wenn sich das Element 100 px innerhalb des Viewports befindet. Das ist nützlich, um Inhalte vorab zu laden oder Animationen zu starten, bevor das Element vollständig sichtbar ist.

Um Bilder per Lazy-Loading zu laden, setzen Sie zunächst das Attribut data-src anstelle von src. Wenn der Observer mit isIntersecting: true ausgelöst wird, kopieren Sie data-src nach src, um die Netzwerkanfrage auszulösen. Rufen Sie anschließend observer.unobserve(entry.target) auf, da das Bild nur einmal geladen werden muss.

Für Fade-in-Animationen fügen Sie eine CSS-Klasse hinzu, sobald isIntersecting den Wert true annimmt: element.classList.add('visible'). Definieren Sie den Übergang in CSS: .card { opacity: 0; transform: translateY(20px); transition: opacity 0.4s, transform 0.4s; } und .card.visible { opacity: 1; transform: none; }. Der Observer löst den Trigger effizient aus.

IntersectionObserver eignet sich ideal zur Erfassung von Aufrufen. Wenn ein Element mit dem Attribut data-analytics-id bei einem Schwellenwert von 0.5 in den sichtbaren Bereich gelangt, lösen Sie ein Analytics-Ereignis aus. So lässt sich genau messen, welche Inhaltsabschnitte Benutzer tatsächlich gelesen haben – deutlich zuverlässiger als eine einfache prozentuale Messung der Scrolltiefe.

Eine einzelne IntersectionObserver-Instanz kann mehrere Elemente beobachten, indem Sie für jedes Element observer.observe(element) aufrufen. Alle beobachteten Elemente verwenden denselben Callback und dieselben Optionen. Verwenden Sie innerhalb des Callbacks entry.target, um zu ermitteln, welches Element die Benachrichtigung ausgelöst hat.

Ein wiederverwendbarer useInView-Hook gibt [ref, inView] zurück. Verknüpfen Sie ref mit einem beliebigen Element und lesen Sie inView aus, um festzustellen, ob es aktuell sichtbar ist. Der Hook akzeptiert ein options-Objekt für threshold und rootMargin. Diese Abstraktion ermöglicht deklarative Scroll-Effekte in jeder Komponente.

Was bedeutet ein IntersectionObserver-Schwellenwert von 0?

IntersectionObserver erfasst die Sichtbarkeit von Elementen effizient anhand von isIntersecting und intersectionRatio. Führen Sie immer eine Bereinigung mit unobserve oder disconnect durch. Verwenden Sie threshold, um den Auslösepunkt zu steuern, und rootMargin, um den Erkennungsbereich zu erweitern. Setzen Sie den Observer für Lazy-Loading, Animationen und das Verfolgen von Analytics-Daten ein.