Vue .js: Only certain pages cannot be scrolled

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