addEventListener('resize')をレスポンシブ対応で使うときの注意

この記事は ここのえ Advent Calendar 2023 Day 21 の記事です。

超忙しい人向けの要約

Resizeイベントは heightがガンガン変わるので width を見ておいた方がよい

ブラウジングしているだけでResizeイベントが走る？

今回はJavascriptのレスポンシブ対応に関するちょっとしたTipsです。

レスポンシブ対応などの関係で、ブラウザのサイズが変更された際にアニメーションを再発生させる、といった何かしらの処理を行うことがあります。そんな時にaddEventLisnterでresizeのイベントを取り扱います。

sample.js

window.addEventListener('resize', () => {
  console.log("on resize")
})

開発環境にiPhoneで接続し、Safariで開きます。iPhone上ではコンソールを確認できないので、Macbook側からWebインスペクタを確認してみましょう。

おや？スマホを横画面にしたりせず、ただページを見ていただけなのに何故かResizeイベントが大量に発生しています……　何もしてないのに壊れちゃった……

メニューバーにはご用心

結論から言うと、犯人はこれです。

SafariでもChromeでも同様の事が言えますが、上下方向にスクロールした際に下のメニューバーが出たり入ったりします。

これが動くとブラウザの表示領域が変わるので、heightがResizeされ、イベントが発生します。

シンプルな対策として、ビューポートの`width`を保持しておき、Resizeイベントの発生時に幅が変更されているか確認することで、不要なコールバック処理が起きないようにします。

let w = window.innerWidth

window.addEventListener('resize', () => {
  if (w === window.innerWidth) return
  w = window.innerWidth
  
  // callback

})

大抵レスポンシブへの対応で問題になるのは、ブラウザの横幅が変わった時なので、これだけやっておけば9割9分問題は解決できると思います。

特にアニメーションを発火させる場合や、DOMを一気に張り替えるような場合はコールバックが肥大化する場合もあるので、これをやっておくとある程度パフォーマンスの改善に繋がると思います。

この問題の厄介な点として、ChromeのDevToolsなどを使ってPCでレスポンシブ対応をしている場合、当然メニューバーは存在しないので、実機テストしたら変な挙動が…という事になりがちです。

別界隈からWebフロントに転向すると結構引っかかりがちな問題だと思うので、困ったらぜひ試してみてください。