Die Resize Observer API
17.03.2022, 09:40 Uhr
Auf Größenänderungen reagieren
Über die Resize Observer API ist es möglich, auf Größenänderungen von Elementen zu reagieren.
Anwendung der Resize Observer API (Bild 1)
(Quelle: Ackermann)
JavaScript stellt eine Fülle von Web APIs zur Verfügung, darunter auch sogenannte Observer APIs, über die sich verschiedene Aspekte einer Webseite beobachten lassen. In Ausgabe 1/2022 der web & mobile DEVELOPER wurde bereits die Mutation Observer API vorgestellt, über die sich auf Änderungen an Elementen im Document Object Model (DOM) einer Webseite reagieren lässt. In Ausgabe 04/2022 dagegen zudem die Intersection Observer API vorgestellt, dies es wiederum ermöglicht, Überschneidungen von verschiedenen Elementen untereinander oder mit dem Viewport zu beobachten. In dem vorliegenden Teil der Artikelreihe über Observer APIs geht es um die sogenannte Resize Observer API.
Die Resize Observer API
Die Resize Observer API (https://wicg.github.io/ResizeObserver/) ermöglicht es, Änderungen bezüglich der Größe von DOM-Elementen zu beobachten und hierauf zu reagieren. Gegenüber der Eigenschaft window.resize beziehungsweise dem gleichnamigen Event resize, für welches sich Event-Listener registrieren lassen, ist die Resize Observer API deutlich performance-schonender und erlaubt darüber hinaus auch das Beobachten von dynamisch hinzugefügten DOM-Elementen (Stichwort Single Page Applications). Einstiegspunkt in die API bildet die namensgebende Klasse ResizeObserver: dem entsprechenden Konstruktor übergibt man eine Callback-Funktion, die immer dann aufgerufen wird, wenn eine Änderung bezüglich der Größe eines Elements beobachtet wurde.
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
