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

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

　　1、禁止body的touchmove事件

 1 function handler(e){e.preventDefault();}
 2 
 3 export function closeTouch(){
 4   document.getElementsByTagName("body")[0].addEventListener('touchmove',
 5   handler,{passive:false});//阻止默认事件
 6 }
 7 //启用页面滚动
 8 export function openTouch(){
 9    document.getElementsByTagName("body")[0].removeEventListener('touchmove',
10    handler,{passive:false});//打开默认事件
11 }

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

 1 import { closeTouch, openTouch } from "../utils/util"
 2 watch: {
 3       '$store.state.menuShow'(val) {
 4         if(val) {
 5           closeTouch();
 6         }else {
 7           openTouch();
 8         }
 9       }
10     },

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

　　2、设置body元素overflow:hidden

1 export function closeTouch(){
2   document.body.style.overflow = 'hidden';
3 }
4 //启用页面滚动
5 export function openTouch(){
6   document.body.style.overflow = 'auto';
7 }

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