Resize Observer API

Konzepte und Nutzung

Es gibt viele Anwendungsfälle für responsive Design-Techniken (und andere), die auf Änderungen der Größe eines Elements reagieren. Frühere Implementierungen waren jedoch oft umständlich und/oder instabil.

Zum Beispiel sind Media Queries / window.matchMedia großartig, um Layouts an spezifischen Punkten zu aktualisieren, wenn sich die Größe des Ansichtsfensters ändert. Aber was, wenn Sie das Layout in Reaktion auf die Größenänderung eines bestimmten Elements, das nicht der äußere Container ist, ändern möchten?

Um dies zu erreichen, wäre eine begrenzte Lösung, Änderungen an einem geeigneten Ereignis zu überwachen, das auf das Element hindeutet, dessen Größenänderung Sie interessiert (z. B. das window resize event), und dann die neuen Dimensionen oder andere Merkmale des Elements nach einer Größenänderung mittels Element.getBoundingClientRect oder Window.getComputedStyle zu ermitteln.

Eine solche Lösung funktioniert in der Regel nur für begrenzte Anwendungsfälle, ist schlecht für die Leistung (das kontinuierliche Aufrufen der genannten Methoden würde zu einem großen Leistungseinbruch führen) und funktioniert oft nicht, wenn die Größe des Browserfensters nicht geändert wird.

Die Resize Observer API bietet eine Lösung für genau diese Art von Problemen und darüber hinaus, indem sie es Ihnen ermöglicht, Änderungen der Größe des Inhalts oder des Randbereichs eines Elements auf performante Weise zu beobachten und darauf zu reagieren. Sie bietet eine JavaScript-Lösung für das oft diskutierte Fehlen von Element Queries in der Webplattform.

Die Nutzung ist einfach und ähnelt sehr anderen Beobachtern, wie dem Performance Observer oder dem Intersection Observer — Sie erstellen ein neues ResizeObserver Objekt mit dem ResizeObserver() Konstruktor und verwenden dann ResizeObserver.observe(), um ein bestimmtes Element auf Größenänderungen zu überwachen. Eine im Konstruktor eingerichtete Rückruffunktion wird dann jedes Mal ausgeführt, wenn sich die Größe ändert, und ermöglicht den Zugriff auf die neuen Dimensionen, sodass Sie auf diese Änderungen beliebig reagieren können.

Schnittstellen

ResizeObserver

Bietet die Möglichkeit, neue Beobachter zu registrieren und das Beobachten von Elementen zu starten und zu stoppen.

ResizeObserverEntry

Beschreibt ein einzelnes Element, das in der Größe geändert wurde, wobei das Element und seine neue Größe identifiziert werden.

Beispiele

Sie finden ein paar einfache Beispiele in unserem GitHub-Repo:

• resize-observer-border-radius.html (Quellcode ansehen): Ein einfaches Beispiel mit einem grünen Kasten, der als Prozentsatz der Ansichtsfenstergröße dimensioniert ist. Wenn sich die Größe des Ansichtsfensters ändert, ändern sich die abgerundeten Ecken des Kastens proportional zur Größe des Kastens. Wir könnten dies einfach border-radius mit einem Prozentsatz implementieren, aber das führt schnell zu hässlich aussehenden elliptischen Ecken, während die obige Lösung Ihnen schön runde Ecken gibt, die mit der Kasten-Größe skalieren.
• resize-observer-text.html (Quellcode ansehen): Hier verwenden wir den Resize Observer, um die font-size einer Überschrift und eines Absatzes zu ändern, wenn sich der Wert eines Sliders ändert und dadurch das enthaltende <div> seine Breite ändert. Dies zeigt, dass Sie auf Änderungen der Größe eines Elements reagieren können, auch wenn diese nichts mit dem Ansichtsfenster zu tun haben.

Der Code wird normalerweise nach diesem Muster verlaufen (entnommen von resize-observer-border-radius.html):

const resizeObserver = new ResizeObserver((entries) => {
  const calcBorderRadius = (size1, size2) =>
    `${Math.min(100, size1 / 10 + size2 / 10)}px`;

  for (const entry of entries) {
    if (entry.borderBoxSize) {
      entry.target.style.borderRadius = calcBorderRadius(
        entry.borderBoxSize[0].inlineSize,
        entry.borderBoxSize[0].blockSize,
      );
    } else {
      entry.target.style.borderRadius = calcBorderRadius(
        entry.contentRect.width,
        entry.contentRect.height,
      );
    }
  }
});

resizeObserver.observe(document.querySelector("div"));

Spezifikationen

Browser-Kompatibilität

Siehe auch

• ResizeObserver: It's Like document.onresize for Elements