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

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 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
ResizeObserver
実験的
Chrome 完全対応 64Edge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 完全対応 51Safari 未対応 なしWebView Android 完全対応 64Chrome Android 完全対応 64Edge Mobile 未対応 なしFirefox Android 未対応 なしOpera Android 完全対応 47Safari iOS 未対応 なしSamsung Internet Android 完全対応 あり
ResizeObserver() constructor
実験的
Chrome 完全対応 64Edge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 完全対応 51Safari 未対応 なしWebView Android 完全対応 64Chrome Android 完全対応 64Edge Mobile 未対応 なしFirefox Android 未対応 なしOpera Android 完全対応 47Safari iOS 未対応 なしSamsung Internet Android 完全対応 あり
observe
実験的
Chrome 完全対応 64Edge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 完全対応 51Safari 未対応 なしWebView Android 完全対応 64Chrome Android 完全対応 64Edge Mobile 未対応 なしFirefox Android 未対応 なしOpera Android 完全対応 47Safari iOS 未対応 なしSamsung Internet Android 完全対応 あり
unobserve
実験的
Chrome 完全対応 64Edge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 完全対応 51Safari 未対応 なしWebView Android 完全対応 64Chrome Android 完全対応 64Edge Mobile 未対応 なしFirefox Android 未対応 なしOpera Android 完全対応 47Safari iOS 未対応 なしSamsung Internet Android 完全対応 あり
disconnect
実験的
Chrome 完全対応 64Edge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 完全対応 51Safari 未対応 なしWebView Android 完全対応 64Chrome Android 完全対応 64Edge Mobile 未対応 なしFirefox Android 未対応 なしOpera Android 完全対応 47Safari iOS 未対応 なしSamsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
未対応  
未対応
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。

あわせて参照