跳出弹窗页面禁止滚动（PC端和手机端）

pc端如何实现

1.当弹窗显示时，为body元素添加属性：overflow：hidden, 当关闭弹窗时移除该属性便可
2.在弹窗的div上设置 @scroll.stop.prevent

<div @scroll.stop.prevent>
 你要显示的内容
</div>

3.出现弹窗时，为body元素添加position:fixed，这样主页面就禁止滑动，同时很好地解决了弹窗穿透的问题。
若弹窗为独立组件，能够采用以下代码：

beforeMount() {
    // 获取原来的scrollTop 并将body的top修改成对应的值
    this.prevBodyStyle_scrollTop = document.body.scrollTop || document.documentElement.scrollTop
    this.prevBodyStyle_top = window.getComputedStyle(document.body, null).getPropertyValue('top')
    document.body.style.top = `-${this.prevBodyStyle_scrollTop}px`
    // 获取原来body的position 为了解决iOS上光标漂移的问题 将position修改成fixed
    this.prevBodyStyle_position = window.getComputedStyle(document.body, null).getPropertyValue('position')
    document.body.style.position = 'fixed'
    // 为了不width空值的状况
    this.prevBodyStyle_width = window.getComputedStyle(document.body, null).getPropertyValue('width')
    document.body.style.width = '100%'
  },

  beforeDestroy() {
    document.body.style.top = this.prevBodyStyle_top || '0px'
    document.body.style.position = this.prevBodyStyle_position
    document.body.style.width = this.prevBodyStyle_width || '100%'
    document.body.scrollTop = document.documentElement.scrollTop = this.prevBodyStyle_scrollTop || 0
  },

备注： 若是弹窗为一个独立的组件， 那么须要使用v-if来控制弹窗是否显示，不可以使用v-show（由于使用v-show，会在主页面刚生成的同时生成该组件，致使position=fixed生效，在弹窗关闭的状况下页面也禁止滑动）

移动端如何实现

1.在弹窗的最外层div上添加@touchmove.stop.prevent (适合弹窗内容不须要滚动的状况下)

<div @touchmove.stop.prevent>
 你要显示的内容
</div>

存在问题： 虽然能够阻止滑动，可是双击的时候主页面仍是会跳动

2.同PC端第三种方法
3.经过addEventListener解决

mounted() {
        document.body.addEventListener('touchmove', this.p, {passive: false})  
    },
beforeDestroy () {
      document.body.removeEventListener('touchmove', this.p)
    },
methods: {
    p (e) {
         e.preventDefault()
          e.stopPropagation()
      } 
}

划重点：addEventListener的第三个参数 {passive: false}

先说说错误的代码，网上千篇一概的都是怎么成功的，纳闷了,反正我没有成功，在手机端和chrome浏览器等依然能够正常滚屏：

document.body.addEventListener("touchstart",function(e){
                    e.stopPropagation();
                    e.preventDefault();
                },false);

错误代码为何不行呢，而为何使用{passive: false}就生效了呢？
摘自MDN的解释：

passive: Boolean，表示 listener 永远不会调用preventDefault()。若是 listener 仍然调用了这个函数，客户端将会忽略它并抛出一个控制台警告。

MDN对于上述错误现象解释地很清楚：

根据规范，passive 选项的默认值始终为false。可是，这引入了处理某些触摸事件（以及其余）的事件监听器在尝试处理滚动时阻止浏览器的主线程的可能性，从而致使滚动处理期间性能可能大大下降。
为防止出现此问题，某些浏览器（特别是Chrome和Firefox）已将touchstart和touchmove事件的passive选项的默认值更改成true文档级节点 Window，Document和Document.body。这能够防止调用事件监听器，所以在用户滚动时没法阻止页面呈现。

var elem = document.getElementById('elem'); 
elem.addEventListener('touchmove', function listener() { /* do something */ }, { passive: true });

添加passive:true参数后，touchmove事件不会阻塞页面的滚动（一样适用于鼠标的滚轮事件）。

因此，咱们能够经过将passive的值显式设置为false来覆盖此行为。

另外：您无需担忧基本scroll 事件的passive值。因为没法取消，所以事件监听器没法阻止页面呈现。（也是在PC端监听scroll无效的缘由）

参考连接

前两种方法：https://blog.csdn.net/Chelle1...
第三种：https://blog.csdn.net/yuhk231...
vue prevent方法: https://www.cnblogs.com/Eden-...
mdn关于addEventListener: https://developer.mozilla.org...