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 => {
const target = entry.target;
const width = entry.contentRect.width.toFixed(2);
if (target.classList.contains("maxw")) {
document.querySelector(".max").textContent = `width: ${width}`;
} else if (target.classList.contains("min")) {
document.querySelector(".min").textContent = `width: ${width}`;
}
});
});
resizeObserver.observe(document.querySelector(".max"));
resizeObserver.observe(document.querySelector(".min"));
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);
