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

javascript/jquery

浏览数:156

2019-9-4

AD:资源代下载服务

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

 

作者:Gerryli