Vue在弹出框后如何禁止页面滑动

作为前端开发，上图所示的弹出框是很常见的，在移动端时，覆盖一层遮罩加上动画效果很容易，在用Vue项目中也需要弹出框，原理和移动端一样，用遮罩层来实现，但是有一个问题，滑动弹出框时，底部页面内容也会跟着滚动。本以为很容易也就是一个简单的设置，网上有很多方法,有的解决方案很复杂，有的不管用，一直没有找到好的解决方案！

原理：我们可以在弹出框出现时，禁止页面的滑动，弹出框下去时，页面回复滑动。

禁止页面滑动的方法代码

  var mo=function(e){e.preventDefault();};
  document.body.style.overflow='hidden';
  document.addEventListener("touchmove",mo,false);//禁止页面滑动

取消页面滑动限制方法代码：

  var mo=function(e){e.preventDefault();};
  document.body.style.overflow='';
  document.removeEventListener("touchmove",mo,false);

  其实这样也很复杂，我们不能每次在要弹出的地方引用禁止滑动的方法吧！这样有很多弹出框，不会在每个页面都要引用这么多遍吧！我们可以这样，把这两个方法设置全局函数，只需要在用的地方应用下，这样页面代码可读性高。

具体实现为：

 (1).在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)
}

(2).在页面使用的方法

//弹出框显示的方法
selectFunction: function () {
  this.$refs.incomeSelect.showModal = true
  //禁止主页面滑动
  this.noScroll()
},

 在点击上图完成让弹框关闭时，就需要通知页面取消禁止滑动事件

colseAlter () {
  //主页面可滑动
  this.canScroll()
},

  可以完美解决上述题目中滑动问题，即使弹出框上的内容需要滑动，用此方法也是完美解决！ 但是！但是！安卓上竟然不行，滑动不了，前端就是兼容问题最复杂，还是要解决啊！

最终的解决方案为：

在main.js中设置

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.afterOpen()

打开滑动的地方调用

this.ModalHelper.beforeClose()

  这种方法安卓，iOS 两端都可兼容，也可解决滑动问题！

本文独发金蝶云社区