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でコンテンツの高さを監視してスクロール量をコンテンツの高さに合わせることができます。
是非使ってみてください。