要素のサイズ変更を検知するResizeObserver

TOC

課題

従来では特定の要素のサイズの変更を検知したい場合、documentやwindowにresize eventを登録し、ウィンドウのサイズの変更をトリガーにし、要素の変更を検知していたと思います。 しかし殆どの場合、その後特定の要素に対し、Element.getBoundingClientRectやWindow.getComputedStyleといった関数を実行する必要があり、レイアウト処理が実行され、パフォーマンスが悪いといった課題がありました。 また、ブラウザのウィンドウサイズをトリガーにしている為、特定の要素のサイズ変更を検知しているわけではないので、場合によっては機能しない事がありました。

ResizeObserver

ResizeObserverは従来の課題を解決し、要素の変更をパフォーマンスを維持したまま検知することができます。

使い方

まずはResizeObserverオブジェクトを作成し、コンストラクターにコールバック関数を渡します。 コールバック関数の引数にはResizeObserverEntryが渡されます。

const resizeObserver = new ResizeObserver(entries => {
  console.log(entires)
  // => [ResizeObserverEntry]
})

ResizeObserverEntry

ResizeObserverEntryは配列で、中には変更を検知した要素の情報が格納されています。 格納されているプロパティは以下の通りです。

const resizeObserver = new ResizeObserver(entries => {
  for (const entry of entries) {
    console.log(entry.target);
    console.log(entry. contentRect);
  }
})

要素変更の監視

要素の変更を監視する場合は、作成したResizeObserverのobserve()メソッドに要素を渡します。

const resizeObserver = new ResizeObserver(entries => {
  // 省略
})
const element = document.querySelecter('.hoge')
resizeObserver.observe(element)

監視の終了

監視を終了したい場合は、unobserve()を実行します

resizeObserver.unobserve(element)