ResizeObserver

これは実験的な機能です。本番で使用する前にブラウザー実装状況をチェックしてください。

ResizeObserver インターフェイスは、Element のコンテンツ矩形または SVGElement のバウンディングボックスへの変更を監視します。コンテンツ矩形は、コンテンツを配置できるボックスです。つまり、ボーダーボックスからパディングを引いたものです。(ボーダーとパディングの説明はボックスモデルを見てください。)

ResizeObserver は、無限のコールバックループとそれ自身のコールバック関数でサイズ変更することによって生じるであろう循環的な依存関係を避けます。これは、後続のフレームで DOM のより深い要素のみを処理することによって行われます。実装が仕様に従っている場合は、描画の前およびレイアウトの後にリサイズイベントを呼び出す必要があります。

コンストラクター

ResizeObserver()
新しい ResizeObserver オブジェクトを作成して返します。

プロパティ

なし

イベントハンドラー

なし

メソッド

ResizeObserver.disconnect()
監視対象のすべての Element ターゲットの監視を終了します。
ResizeObserver.observe()
指定された Element の監視を開始します。
ResizeObserver.unobserve()
指定された Element の監視を終了します。

次の例では、幅の変更に応じてボックスの境界線の半径を変更します。

const resizeObserver = new ResizeObserver(entries => {
  for (let entry of entries) {
    entry.target.style.borderRadius = Math.max(0, 250 - entry.contentRect.width) + 'px';
  }
});
resizeObserver.observe(document.querySelector('.box:nth-child(2)'));

仕様

仕様書 ステータス コメント
Resize Observer
ResizeObserver の定義
編集者草案 初期定義

ブラウザの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
ResizeObserverChrome 完全対応 64Edge 未対応 なしFirefox 完全対応 69IE 未対応 なしOpera 完全対応 51Safari 未対応 なしWebView Android 完全対応 64Chrome Android 完全対応 64Firefox Android 未対応 なしOpera Android 完全対応 47Safari iOS 未対応 なしSamsung Internet Android 完全対応 あり
ResizeObserver() constructorChrome 完全対応 64Edge 未対応 なしFirefox 完全対応 69IE 未対応 なしOpera 完全対応 51Safari 未対応 なしWebView Android 完全対応 64Chrome Android 完全対応 64Firefox Android 未対応 なしOpera Android 完全対応 47Safari iOS 未対応 なしSamsung Internet Android 完全対応 あり
disconnectChrome 完全対応 64Edge 未対応 なしFirefox 完全対応 69IE 未対応 なしOpera 完全対応 51Safari 未対応 なしWebView Android 完全対応 64Chrome Android 完全対応 64Firefox Android 未対応 なしOpera Android 完全対応 47Safari iOS 未対応 なしSamsung Internet Android 完全対応 あり
observeChrome 完全対応 64Edge 未対応 なしFirefox 完全対応 69IE 未対応 なしOpera 完全対応 51Safari 未対応 なしWebView Android 完全対応 64Chrome Android 完全対応 64Firefox Android 未対応 なしOpera Android 完全対応 47Safari iOS 未対応 なしSamsung Internet Android 完全対応 あり
unobserveChrome 完全対応 64Edge 未対応 なしFirefox 完全対応 69IE 未対応 なしOpera 完全対応 51Safari 未対応 なしWebView Android 完全対応 64Chrome Android 完全対応 64Firefox Android 未対応 なしOpera Android 完全対応 47Safari iOS 未対応 なしSamsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
未対応  
未対応

あわせて参照