ResizeObserver.ResizeObserver()

ResizeObserver コンストラクターは、 Element のコンテンツまたは境界の矩形、または SVGElement のバウンディングボックスに対する変更を監視する新しい ResizeObserver オブジェクトを作成します。

構文

var ResizeObserver = new ResizeObserver(callback)

引数

callback
監視中のものに寸法の変更が発生するたびに呼び出される関数です。関数は2つの引数で呼び出されます。
entries
ResizeObserverEntry オブジェクトの配列で、それぞれの変更の後で要素の新しい寸法にアクセスするために使用することができます。
observer
ResizeObserver 自身への参照で、必要に応じてコールバック内から確実にアクセスできます。これは、たとえば特定の条件に達したときにオブザーバーを自動的に監視解除するために使用できますが、必要ない場合は省略することができます。

コールバックは一般に、次のパターンに従います。

function(entries, observer) {
  for (let entry of entries) {
    // Do something to each entry
    // and possibly something to the observer itself
  }
}

次のスニペットは resize-observer-text.html (ソースを表示) の例から取ったものです。

const resizeObserver = new ResizeObserver(entries => {
  for (let entry of entries) {
    if(entry.contentBoxSize) {
      h1Elem.style.fontSize = Math.max(1.5, entry.contentBoxSize.inlineSize/200) + 'rem';
      pElem.style.fontSize = Math.max(1, entry.contentBoxSize.inlineSize/600) + 'rem';
    } else {
      h1Elem.style.fontSize = Math.max(1.5, entry.contentRect.width/200) + 'rem';
      pElem.style.fontSize = Math.max(1, entry.contentRect.width/600) + 'rem';
    }
  }
});

resizeObserver.observe(divElem);

仕様書

仕様書 状態 備考
Resize Observer
ResizeObserver の定義
編集者草案 初回定義

ブラウザーの互換性

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

凡例

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