observeResize

Die observeResize-Funktion überwacht Größenänderungen von Elementen. Wenn sich die Größe ändert, wird die angegebene Callback-Funktion ausgeführt.

Diese Funktion verwendet ResizeObserver, jedoch im Singleton-Modus, was die Leistung verbessert.

Verwendung

Importieren Sie die Funktion nach Bedarf:

import { observeResize } from 'mdui/functions/observeResize.js';

Beispiel:

// Größenänderungen von document.body überwachen
const observer = observeResize(document.body, function (entry, observer) {
  // Die Größe von document.body hat sich geändert, die neuen Maße können über entry abgerufen werden
  console.log(entry);

  // Diese Methode kann aufgerufen werden, um die Überwachung zu beenden
  observer.unobserve();
});

// Die Überwachung kann auch über die unobserve-Methode des Rückgabewerts beendet werden
observer.unobserve();

API

observeResize(target: string | HTMLElement | JQ<HTMLElement>, callback: Callback): ObserveResize

Das Argument target kann ein CSS-Selektor, ein DOM-Element oder ein JQ-Objekt sein.

Callback

(entry: ResizeObserverEntry, observer: ObserveResize) => void

Innerhalb der Callback-Funktion zeigt this auf ObserveResize.

ObserveResize

{
  unobserve: () => void;
}