Eine großartige Einführung von Dan Callahan, warum IntersectionObserver so verdammt nützlich ist
Was haben unendliches Scrollen, Lazy Loading und Online-Werbung gemeinsam?
Sie müssen die Sichtbarkeit von Elementen auf einer Seite kennen – und darauf reagieren!
Leider war es im Web traditionell schwierig zu wissen, ob ein Element sichtbar ist oder nicht. Die meisten Lösungen lauschen auf Scroll- und Resize-Ereignisse und verwenden dann DOM-APIs wie
getBoundingClientRect(), um manuell zu berechnen, wo sich Elemente relativ zum Viewport befinden. Das funktioniert in der Regel, ist aber ineffizient und berücksichtigt keine anderen Möglichkeiten, wie sich die Sichtbarkeit eines Elements ändern kann, z. B. wenn ein großes Bild weiter oben auf der Seite geladen wird und alles andere nach unten verschiebt.
Die API ist köstlich einfach.