みなさんこんにちは、現役エンジニアのサメハックです
未経験からWebエンジニアに転職し、
正社員として5年働いたのちフリーランスとして独立しました。
JavaScriptの解説シリーズです。
今回はResizeObserverを使った要素のサイズ監視について学んでいきましょう！
駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます！
この記事を読むと・・・
- ResizeObserverの使い方がわかる
要素をサイズ変更を監視しよう！
ResizeObserverを使おう
ResizeObserverとはHTMLの要素のサイズを監視するクラスです。
これを使用することで
- 要素1のサイズが変更されたら要素2もサイズ変更
- ブラウザのサイズが変更されたらイベント発火
などを実装することができます。
ResizeObserverを使う構文
// インスタンスの生成
const resizeObserver = new ResizeObserver((elements) => {
// 監視対象のサイズが変更される度この部分の処理が実行される
});
// 監視対象となる要素
const target = document.getElementById("要素のID名");
// 監視を開始する構文
resizeObserver.observe(target);
// 監視の解除
// resizeObserver.disconnect();画面の初期表示でも実行されるよ！
実際に動かしてみよう！
See the Pen
Untitled by samehack (@samehack)
on CodePen.
textareaのサイズを変更すると、赤い要素が連動するよ！
ちなみに20秒経つと監視が解除されるので試したい場合は1度リロードしてね！
ちなみに20秒経つと監視が解除されるので試したい場合は1度リロードしてね！
まとめ
- ResizeObserverを使うと要素のサイズ変更を監視できる
- 初期表示でも実行される
満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈
