移动端之模态框滚动穿透问题

　　相信各位小伙伴利用H5做移动端应用时，在写弹出层时肯定用到过滚动穿透问题，虽然页面加了背景遮罩，滑动页面时，如若页面滚在滚动条，底部仍然可以滑动。遇到这种问题，第一想到的可能是能否监听弹出层的显示与隐藏，在监听函数中做处理；一般有以下两种处理方式：

　　1、禁止body的touchmove事件

function handler(e){e.preventDefault();}

export function closeTouch(){
  document.getElementsByTagName("body")[0].addEventListener('touchmove',
  handler,{passive:false});//阻止默认事件
}
//启用页面滚动
export function openTouch(){
   document.getElementsByTagName("body")[0].removeEventListener('touchmove',
   handler,{passive:false});//打开默认事件
}

　　然后再需要用的组件引入使用

import { closeTouch, openTouch } from "../utils/util"
watch: {
      '$store.state.menuShow'(val) {
        if(val) {
          closeTouch();
        }else {
          openTouch();
        }
      }
    },

　　这样写有个弊端，就是页面上所有的touchmove事件都被禁止了，可能导致弹出层本身里的元素内容都不能滑动，下面做了下稍微的修改就可以了

　　2、设置body元素overflow:hidden

export function closeTouch(){
  document.body.style.overflow = 'hidden';
}
//启用页面滚动
export function openTouch(){
  document.body.style.overflow = 'auto';
}

直接设置body元素overflow:hidden就好了