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

三种穿透滑动情况以及解决办法

1.引用mintui中mt-popup下拉选择框选择内容时，滑动穿透问题
（1）如果下拉选择内容过少，mt-popup内部不需要滑动：
就只需加入@touchmove.native.stop.prevent 阻止默认根元素的默认事件

 	<mt-popup
         v-model="popupVisible"
         position="bottom"
         popup-transition="popup-fade"
         :closeOnClickModal="false"
         @touchmove.native.stop.prevent
       >  //防止滚动穿透

（2）如果下拉选择内容较多，mt-popup内部需要进行滑动：

页面中

 	<mt-popup
         v-model="popupVisible"
         position="bottom"
         popup-transition="popup-fade"
         :closeOnClickModal="false"
         @touchmove.native.stop.prevent
       >  //防止滚动穿透

data中

 - data(){
         
         
	popupTopVisible: false,
	handle: function(e){
         
         
            e.preventDefault()
        },
},

watch中

 watch:{
         
         
	popupTopVisible(value) {
         
         
      if(value) {
         
         
        this.closeTouch ()
      }else{
         
         
        this.openTouch ()
      }
    },
}

method中

methods: {
         
         
      open() {
         
         
          document.getElementsByTagName('body')[0].removeEventListener('touchmove', this.handler, {
         
         passive:false})//打开默认事件
      },
      	close() {
         
         
          document.getElementsByTagName('body')[0].addEventListener('touchmove', this.handler, {
         
         passive:false})//阻止默认事件
      },
 }

2.蒙层上的页面内容不需要滑动时，出现的滑动穿透问题
在蒙层上直接添加：@touchmove.prevent

 <div class="ruleWrap" v-show="ruleMaskShow" @touchmove.prevent></div>

2.蒙层上的页面内容长于页面高度需要进行滑动时，出现的滑动穿透问题

在html文件添加如下代码

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

全局CSS中添加

body.mongolia_open {
         
         
  position: fixed;
  width: 100%;
}

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

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

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