移动端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();

说明：

因为本人的懒惰！
每次遇到问题都难得寝食难安（不可信~）
解决问题后，总是不以任何形式做记录（包括脑子）
等再次遇到同样的问题后都后悔不已，所以这次我要通过CSDN这个小可爱记录下来，给我自己留条退路，当然如果大家需要，也可以参考一下！