移动端vue项目解决遮罩层滚动穿透问题

网上有好几种方法，对于我来说，常用的就两种，

1、当弹框明显小于页面的时候，确保不需要滑动查看内容时，可在最外层的遮盖层添加  ：@touchmove.prevent

 

2、弹框的内容明显长过屏幕，需要弹框内容滑动，主页页面不滑动

（1）在html文件添加如下代码

<script type="text/javascript">
  //解决遮罩层滚动穿透问题，分别在遮罩层弹出后和关闭前调用
  const ModalHelper = ( (bodyCls) =>{
    let 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');
</script>

（2）在全局的CSS中添加

body.dialog-open {
  position: fixed;
  width: 100%;
}

（3）在vue组件中，对话框弹出和关闭的地方调用上面那段JS代码

对话框弹出后调用：ModalHelper.afterOpen();

对话框关闭前调用：ModalHelper.beforeClose();

此方法的原理是：弹出弹框时，使背景主页内容作为固定定位，这样页面的滑动对其就没有任何影响，关闭弹框使，移除这个固定定位的类名，回复正常