observeResize

observeResize 関数は、要素のサイズ変更を監視し、サイズが変更されたときに指定されたコールバック関数を実行するために使用します。

この関数は ResizeObserver を使用して実装されていますが、シングルトンパターンを採用しているため、パフォーマンスがより優れています。

使用方法

関数を必要に応じてインポートします：

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

使用例：

// document.body のサイズ変更を監視
const observer = observeResize(document.body, function (entry, observer) {
  // document.body のサイズが変更されました。entry から新しいサイズを取得できます
  console.log(entry);

  // このメソッドを呼び出して監視を解除できます
  observer.unobserve();
});

// 関数の戻り値の unobserve メソッドを呼び出して監視を解除することもできます
observer.unobserve();

API

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

target パラメーターは CSS セレクター、DOM 要素、または JQ オブジェクト です。

Callback

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

コールバック関数内では、this は ObserveResize を指します。

ObserveResize

{
  unobserve: () => void;
}