Resize ObserverでDOMのサイズ変化を監視してみる

「スクロールイベントの代わりにIntersection Observerを使ってみよう」と「Mutation Observerを使ってDOMを監視してみる」に続き、Observer APIの第三弾です。

windowのサイズ変化であればresizeイベントで発火しますが、DOMのサイズ変化だとresizeイベントは発火しません。
ResizeObserver APIを使うことによってDOMのサイズ変化を監視することができます。

Resize Observerの使い方

基本的な使い方は下記になります。

const target = document.querySelector('#target');
const observer = new ResizeObserver((entries)=>{
	entries.forEach((entry)=>{
		// 処理を記述
	});
});
observer.observe(target);

サンプル

ボタンをクリックするとエリアのサイズが変わり、widthとheightを表示するサンプルです。

See the Pen Resize Observer by Daisuke Iso (@kojilow) on CodePen.0

弊社で実装を担当しました「ASIAN KUNG-FU GENERATION 25周年特設サイト」のようなsmooth scrollを使用したサイトを構築する際に、コンテンツ部分をposition:fixedなどで配置してスクロールに合わせてtransformで表示位置を移動させるのですが、アコーディオン等でコンテンツの高さが変わる場合、ページのスクロール量も変更しなければなりません。
そんな時にResize Observerでコンテンツの高さを監視してスクロール量をコンテンツの高さに合わせることができます。
是非使ってみてください。