<
CSS, HTML & Javascript mit {stil}

Resize Observer – Größenänderungen von Elementen erkennen

ResizeObserver, wenn iframe oder anderes Element verkleinert oder vergrößert wird

Javascript stellt mittels des ResizeObserver-Objekts fest, ob sich Breite und Höhe eines Elements – z.B. durch einen Benutzereingriff oder einen dynamischen Datentransfer – ändern. Hier mussten wir früher auf das resize-Event setzen und dabei Performance-Einbrüche hinnehmen, denn resize feuert bei jeder Änderung des Viewports.

23-02-02 SITEMAP

Breite oder Höhe eines Elements geändert?

Der häufigste Grund für eine Größenänderung ist das Drehen eines Handys oder Tabletts vom Hochkant- oder Porträt-Modus in das Querformat bzw. Landscape. Darüber hinaus können dynamisch hinzugefügte Elemente die Breite / Höhe ihres Containers ändern.

Ein ResizeObserver beschränkt die Beobachtung auf einzelne Elemente, während das globale window.resize bei jeder Größenänderung des Viewports feuert und schnell zu Leistungseinbußen führt.

ResizeObserver - Initialisierung

Der Resize Observer wird genauso wie der Intersection Observer durch eine Callback-Funktion initialisiert:

const resizeObserver = new ResizeObserver(entries => {

});

Der Aufruf erfolgt mit

resizeObserver.observe(elems);
resizeObserver.observe(otherElems);

Die Callback-Funktion iteriert über die gemeldeten Elemente.

const resizeObserver = new ResizeObserver(entries => {
	entries.forEach(entry => {
		document.querySelector (".res").innerHTML = `width: ${entry.contentRect.width} height: ${entry.contentRect.height}`;
	});
});

const elems = document.querySelector('.ente');
myObserver.observe(elems);

Jedem beobachteten Element ist ein Objekt mit einem contentRect und einer target-Eigenschaft zugewiesen. Target ist das DOM-Element selber. Das contentRect hat width, height, x, y, top, right, bottom und left.

Anders als die mit getBoundingClientRect enthalten Breite und Höhe des contentRect kein Padding. contentRect.top ist top padding, contentRect.left ist left padding.

resizeObserver und CSS resize

Der Benutzer kann ein HTML-textarea-Element schon seit langer Zeit durch Ziehen an der Ecke unten rechts kleiner oder größer aufziehen. CSS erlaubt mit der resize-Eigenschaft weiteren Elementen ein Verkleinern oder Vergrößern von Bereichen:

.myElem {
  resize: vertical/horizontal/both
}

Es war einmal eine kluge junge Ente, die hervorragend sehen konnte und obendrein eine angesehene Mathematikerin war. Durch das lange Studieren bei schlechtem Licht wurden ihre Augen mit den Jahren zusehens schlechter, und eines Tages konnte sie kaum noch ihre eigenen Randnotizen erkennen, nicht einmal ihre Lieblingsformel e = N*te.

Formeln mit MathML konnte sie nur noch erkennen, wenn sie nicht innerhalb von Zeilen standen, sondern zentral mit viel Padding drum herum.

∑ k= n m a (k)

Weil Chrome MathML damals noch nicht verstand, konnte sie Publikationen nur noch mit Firefox studieren. Darum bat sie eines Tages ihren Assistenten, ihr einen guten Augenarzt zu suchen.

width: 200px
const myObserver = new ResizeObserver(entries => {
	entries.forEach(entry => {
		document.querySelector (".res").innerHTML = "width: " + entry.contentRect.width + "
height: " + entry.contentRect.height;
	});
});

const someEl = document.querySelector('.ente');
myObserver.observe(someEl);