As the title says, set certain pages to be non-scrollable when fibering, and turn scrolling back on when the page is discarded (transitioning to another page).
implementation
Create a function on the main page, considering that there may be more than .js you want to make scrollable
Functions for setting events
function noScroll (event) { event.preventDefault() }
No scrolling
Vue.prototype.$noScroll = function () {
SP
document.addEventListener(‘touchmove’, noScroll, { passive: false })
PC
document.addEventListener(‘mousewheel’, noScroll, { passive: false })
}
Remove scrolling ban
Vue.prototype.$returnScroll = function () {
SP
document.removeEventListener(‘touchmove’, noScroll, { passive: false })
PC
document.removeEventListener(‘mousewheel’, noScroll, { passive: false })
}call
Calls a function that mounted prohibits when generating a page that you want to prohibit scrolling, and a function that enables scrolling in destroyed when destroying a page (transitioning to another page).
...
<script>
export default {
mounted () {
this.$noScroll()
},
destroyed () {
this.$returnScroll()
}
}
</script>
...Reference: Vue.js Lifecycle
Roughly speaking, it looks like this.
- During instance generation
- beforeCreate
- created
- On mount
- beforeMounted
- mounted
- When deleting an instance
- beforeDestroy
- destroyed
This time, I used mounted and destroyed, but there might be a more appropriate place.
Reference
Vue インスタンス — Vue.js
Vue.js - The Progressive JavaScript Framework
jp.vuejs.org
