#自定义弹出框页面滑动问题

在main.js中设置全局函数

###弹出框禁止滑动
Vue.prototype.noScroll = function () {
  var mo = function (e) { e.preventDefault() }
  document.body.style.overflow = 'hidden'
  document.addEventListener('touchmove', mo, false)// 禁止页面滑动
}
 
###弹出框可以滑动
Vue.prototype.canScroll = function () {
  var mo = function (e) {
    e.preventDefault()
  }
  document.body.style.overflow = ''// 出现滚动条
  document.removeEventListener('touchmove', mo, false)
}

在页面使用时：

禁止主页面滑动

this.noScroll()

主页面可滑动

this.canScroll()

因为当初是在苹果手机上的测试的，但是在安卓手机发现有些限制，于是解决办法为在main.js中设置全局函数：

弹出框显示后调用afterOpen，关闭弹出框前调用beforeClose

Vue.prototype.ModalHelper = (function (bodyCls) {
  var scrollTop
  return {
    afterOpen: function () {
      scrollTop = document.scrollingElement.scrollTop
      document.body.classList.add(bodyCls)
      document.body.style.top = -scrollTop + 'px'
    },
    beforeClose: function () {
      document.body.classList.remove(bodyCls)
      // scrollTop lost after set position:fixed, restore it back.
      document.scrollingElement.scrollTop = scrollTop
    }
  }
}('dialog-open'))

在需要的地方调用：

打开滑动： this.ModalHelper.beforeClose();

关闭滑动： this.ModalHelper.afterOpen();