【Vue.js】特定のページのみスクロール不可にする

タイトルの通り、特定のページに繊維時にスクロール不可に設定して、ページ破棄時(別のページへ遷移時)にスクロールを有効に戻す。

実装

スクロール不可にしたいページが複数ある可能性を考慮して、main.jsに関数を作成する

// イベント設定用関数
function noScroll (event) { event.preventDefault() }

// スクロール禁止
Vue.prototype.$noScroll = function () {
  // SP
  document.addEventListener(‘touchmove’, noScroll, { passive: false })
  // PC
  document.addEventListener(‘mousewheel’, noScroll, { passive: false })
}

// スクロール禁止を解除
Vue.prototype.$returnScroll = function () {
  // SP
  document.removeEventListener(‘touchmove’, noScroll, { passive: false })
  // PC
  document.removeEventListener(‘mousewheel’, noScroll, { passive: false })
}

呼び出し

スクロールを禁止したいページの生成時にmountedで禁止にする関数を呼び出し、ページ破棄(別のページへ遷移時)にdestroyedでスクロールを有効にする関数を呼びます。

...
<script>
export default {
  mounted () {
    this.$noScroll()
  },
  destroyed () {
    this.$returnScroll()
  }
}
</script>
...

参考:Vue.jsのライフサイクル

大まかに書くと、こんな感じ。

  • インスタンス生成時
    • beforeCreate
    • created
  • マウント時
    • beforeMounted
    • mounted
  • インスタンス削除時
    • beforeDestroy
    • destroyed

今回は、mountedとdestoryedを使用したが、より適切な箇所があるかも。

参考

Vue インスタンス — Vue.js
Vue.js - The Progressive JavaScript Framework
タイトルとURLをコピーしました