相信各位小伙伴利用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就好了