IntersectionObserver API und Schwellenwerte

IntersectionObserver löst Callbacks aus, wenn ein Element den Viewport (oder einen anderen Scroll-Container) betritt oder verlässt. Er ist die moderne, performante Alternative zu Scroll-Listenern: Der Browser übernimmt die Berechnung, und Ihr Code läuft nur bei tatsächlichen Sichtbarkeitsänderungen.

new IntersectionObserver(callback, options) erstellt einen Observer. Der Callback erhält ein Array von Einträgen, wenn sich Überschneidungen ändern. Die Optionen legen fest, welcher Container beobachtet wird und bei welchen Schwellenwerten der Callback ausgelöst wird.

Jeder Eintrag enthält target (das beobachtete Element), isIntersecting (Boolean), intersectionRatio (0 bis 1), boundingClientRect, intersectionRect und time. Verwenden Sie isIntersecting für binäre Sichtbarkeitsprüfungen und intersectionRatio für Logik, die den prozentual sichtbaren Anteil berücksichtigt.

{ threshold: 0.5 } löst den Callback aus, sobald das Verhältnis der Überschneidung die 50-%-Marke überschreitet. Verwenden Sie ein Array wie [0, 0.25, 0.5, 0.75, 1], um bei jedem Viertel eine Auslösung zu erhalten – nützlich für Fortschrittsanzeigen oder Analysen, die den „% sichtbaren“ Anteil melden.

Standardmäßig misst der Observer die Überschneidung mit dem Viewport. Setzen Sie root: someScrollableDiv, um sie relativ zu einem inneren Scroll-Container zu messen – zum Beispiel bei einer virtualisierten Liste in einem div mit fester Höhe.

rootMargin: "200px" vergrößert den Beobachtungsbereich auf jeder Seite um 200 Pixel. Verwenden Sie dies, um früher auszulösen (Bilder 200 px vor dem Eintritt in den Viewport zu laden) oder später (erst auszulösen, wenn sie den Viewport vollständig verlassen haben).

observer.observe(element) beginnt mit der Beobachtung eines Elements; observer.unobserve(element) beendet sie. Rufen Sie unobserve immer auf, wenn Sie den Callback nicht mehr benötigen (zum Beispiel nachdem Lazy Loading einmal ausgelöst wurde), um Speicher freizugeben.

observer.disconnect() beendet die Beobachtung aller beobachteten Elemente. Rufen Sie dies auf, wenn die Komponente ausgehängt wird oder der Observer nicht mehr benötigt wird. So verhindern Sie Leaks durch Observer, die länger als ihr Anwendungsfall bestehen bleiben.

Callbacks werden asynchron und gebündelt zugestellt. Viele Überschneidungsänderungen während eines schnellen Scrollvorgangs lösen einen Callback mit allen Einträgen aus, nicht einen pro Element. Das ist ein großer Performancevorteil gegenüber Scroll-Listenern, die bei jedem Scroll-Ereignis ausgelöst werden.

Wenn Sie ein neues Element beobachten, wird der Callback fast sofort einmal mit dem aktuellen Zustand ausgelöst. So können Sie Elemente behandeln, die beim Beginn der Beobachtung bereits sichtbar sind, ohne einen speziellen Initialisierungspfad zu benötigen.

Lazy Loading von Bildern, das Auslösen von Animationen beim Hineinscrollen in den sichtbaren Bereich, unendliches Scrollen (Beobachten eines Sentinels am Listenende), Erfassen der Artikel, die ein Benutzer tatsächlich gelesen hat, sowie das Umschalten eines Sticky-Headers anhand der Sichtbarkeit des Hero-Bereichs.

Was ist der Unterschied zwischen threshold: 0 und threshold: 1 bei einem IntersectionObserver?

IntersectionObserver löst Callbacks bei Sichtbarkeitsänderungen von Elementen aus und bietet integrierte Performance-Optimierung sowie Bündelung. Ersetzen Sie Scroll-Listener damit, wenn es um Sichtbarkeitslogik geht. Konfigurieren Sie ihn mit threshold (0 bis 1 oder als Array), root (benutzerdefinierter Scroll-Container) und rootMargin (vergrößert oder verkleinert den Beobachtungsbereich). Mit observe/unobserve beobachten Sie einzelne Elemente; disconnect räumt alles auf.