Die Intersection Observer API
07.02.2022, 10:35 Uhr
Überschneidungen von Elementen
Über die Intersection Observer API ist es möglich, auf Änderungen bezüglich der Überschneidung von Elementen mit dem Viewport und mit anderen Elementen zu reagieren.
Zu ermitteln, ob sich Elemente mit dem sichtbaren Bereich (dem Viewport) oder mit anderen Elementen überschneiden, kann in verschiedenen Anwendungsfällen notwendig sein. Beispielsweise lassen sich hierüber sehr einfach Inhalte auf einer Website abhängig von der Scrollposition dynamisch nachzuladen, um auf diese Weise den Effekt des unendlichen Scrollens hervorzurufen. Auch lässt sich hierüber messen, wie lange bestimmte Elemente auf einer Website sichtbar waren (beispielsweise geschaltete Werbung), um auf diese Weise Metriken über das Nutzerverhalten zu sammeln.
Konfiguration von Intersection Observern
Die sogenannte Intersection Observer API adressiert Anwendungsfälle wie die eben beschriebenen und stellt ein Interface zur Verfügung, über das es möglich ist, auf Überschneidungen von Elementen mit dem Viewport zu reagieren. Dazu lässt sich jeweils eine Callback-Funktion definieren, die immer dann aufgerufen wird, wenn sich ein Element in den Viewport oder ein anderes Element hinein oder hinaus bewegt (Bild 1 - Bild 4).
Jetzt 1 Monat kostenlos testen!
Sie wollen zukünftig auch von den Vorteilen eines plus-Abos profitieren? Werden Sie jetzt dotnetpro-plus-Kunde.
- + Digitales Kundenkonto,
- + Zugriff auf das digitale Heft,
- + Zugang zum digitalen Heftarchiv,
- + Auf Wunsch: Weekly Newsletter,
- + Sämtliche Codebeispiele im digitalen Heftarchiv verfügbar