【Vue.js】ハンバーガーメニュー開閉時にスクロール制御する方法

はじめに

こんにちは。
こちらの記事では、クリックイベント発生時にスクロールの制御を行う方法を記しています。
誤っている点がございましたらコメントいただけると幸いです。

実装手順

1. スマホのときに表示するハンバーガーボタンを作成する

レスポンシブ対応時に、ヘッダーにボタンを配置する。
isOpenの初期値にfalseを設定しているので、クリックされてtoggleScrollイベントが発火すると、真偽値が反転する処理を記述する。

template

<header>
  <button @click="toggleScroll">
</header>

script

data: function () {
  return {
    isOpen: false,
  };
},
methods: {
    toggleScroll() {
      this.isOpen = !this.isOpen;
    }
}

2. イベントの発生を制御する関数を定義

この後使用するスクロールを制御を実装するために、preventDefault()メソッドを定義します。

script

function scroll_control(event) {
  event.preventDefault();
}

export default {
}

3. 真偽値を判別してスクロールの制御を行う

isOpenがtrueのときは、PCでのスクロール（mousewheel）とスマホでのタッチスクロール（touchmove）を無効にし、falseのときは無効にしたイベントを解除する処理を実装します。

script

methods: {
  toggleScroll() {
    this.isOpen = !this.isOpen;
    if (this.isOpen === true) {
      document.addEventListener("mousewheel", scroll_control, {
        passive: false,
      });
      document.addEventListener("touchmove", scroll_control, {
        passive: false,
      });
    } else {
      document.removeEventListener("mousewheel", scroll_control, {
        passive: false,
      });
      document.removeEventListener("touchmove", scroll_control, {
        passive: false,
      });
    }
  },
}

2.で定義したscroll_control()の中でpreventDefault()が実行されています。また、preventDefault()でスマホでのタッチスクロール（touchmove）を無効にする場合は、passive:falseを設定しないと正常な挙動にならないので注意が必要です。

参考

• Event.preventDefault()
• 【javaScript】でスクロールを禁止にする（PC、スマホ対応）
• マウスによるスクロールやスマホのスワイプを制御するjs(passive: false)

おわりに

ここまでクリックイベント発生時にスクロールの制御を行う方法についてまとめました。
Vue.jsでの実装されている記事がなかったので、このように実装してみましたが、こんな方法もあるよ！などがあればコメントいただけると助かります！

以上、最後まで読んでいただきありがとうございました！
よければLGTMを押してくれると嬉しいです！