タイトルの通り、特定のページに繊維時にスクロール不可に設定して、ページ破棄時(別のページへ遷移時)にスクロールを有効に戻す。
実装
スクロール不可にしたいページが複数ある可能性を考慮して、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