【Javascript】スマホをスクロールした時にリサイズイベントが発生してしまう時の対処法

2020-09-24

リサイズイベントがスマホをスクロールしただけで、発生してしまう事案があったので、その対処法です。

結論として横幅に変化があったときだけ、発火するように書けば対処出来ます。

以下、参考にした記事です。

qiita.com
iOS Safariでスクロールしただけでリサイズイベントが発生する原因と対処法 #JavaScript - Qiita
iOSの標準ブラウザであるMobile Safariにおいて、「ウインドウサイズが変わった」というイベントが発生するのはどんなときだと思いますか？ Mobile SafariはiPhone端末のサイ…

リサイズイベントのコード

var window_width = window.innerWidth;
var timer = false;
$(window).on("orientationchange resize", function () {
  var resize_width = window.innerWidth;
  if (window_width != resize_width) {
    if (timer !== false) {
      clearTimeout(timer);
    }
    timer = setTimeout(function () {
      //console.log('ここに実行する処理を記述');
      window_width = resize_width;
    }, 100);
  }
});