Resize Observer – Größenänderungen von Elementen erkennen
Das ResizeObserver-Objekts stellt fest, ob sich Breite und Höhe eines Elements – z.B. durch einen Benutzereingriff oder einen dynamischen Datentransfer – ändern. Die geänderte Größe kann effizient mit contentRect abgefragt werden – einem exklusiven Teil des ResizeObserver-Callbacks.
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 Resize Observer 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.
Resize Observer - 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.querySelectorAll('.elem');
myObserver.observe(elems);
resize-Observer und contentRect
getBoundingClientRect() liefert Informationen über die Größe und Position eines Elements. Der resize-Observer liefert mit contentRect nur die Größe, nicht aber die Position und ist effizienter, wenn tatsächlich nur die Größe nach einem Resize gefragt ist.
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 enthaltene Breite und Höhe enthält das contentRect kein padding.
- contentRect.top ist top padding,
- contentRect.left ist left padding.
.elem {
max-width: 900px;
padding: 2rem;
}
| Merkmal | contentRect | getBoundingClientRect() |
|---|---|---|
| Herkunft | ResizeObserverEntry.contentRect | Methode an jedem DOM-Element |
| Wofür? | Größe des Inhaltsbereichs bei Resize | Gerenderte Größe und Position im Viewport |
| Bezieht sich auf | Nur den Content (ohne Padding, Border, Margin) | Alles Sichtbare, inkl. Padding + Border |
| Einheit | CSS-Pixel | CSS-Pixel |
| Beeinflusst von | CSS box-sizing (bedingt) | Layout, Transform, Scroll, Zoom usw. |
| Position enthalten? | Nein | Ja: top, left, bottom, right |
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.
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.
const myObserver = new ResizeObserver(entries => {
entries.forEach(entry => {
document.querySelector (".res").innerHTML =
`width: ${entry.contentRect.width}<br>
height: ${entry.contentRect.height}`;
});
});
const resizedBox = document.querySelector('.resbox');
myObserver.observe(resizedBox);
