移动端弹出层弹出 body还能滚动(滚动穿透)

时间:2021-09-11 09:25:22

引用bootstrap的dialog组件,不过在移动端,dialog弹出,body还能滚动。

document.addEventListener('touchmove', function (event) {
    //判断条件,条件成立才阻止背景页面滚动,其他情况不会再影响到页面滚动
    if ($(".modal").css('display')=="block") {
        event.preventDefault();
    }
});

有一个bug  如果dialog高度比较高,dialog也不能滚动了呀。 

想着只对蒙版进行绑定事件,不过bootstrap的dialog  的蒙版是动态出现的,渣渣的我不会取dom。(老司机带带我呀),刚刚用jquery取了一下,咋也没取到,道行不够呀。(评论告诉我为啥子)

不过是自己写的dialog可以这么操作。

document.getElementById('mask').addEventListener('touchmove', function (event) {     //对蒙版绑定touchmove的属性
//判断条件,条件成立才阻止背景页面滚动,其他情况不会再影响到页面滚动
if ($(".modal").css('display')=="block") {
event.preventDefault();
}
})


-----------------------------------------分割符-----------------------------------------------------

补充新方法:

我点击弹出按钮的时候给body加上一个class

.modal-open{overflow:hidden;}     //安卓高版本还是有点问题,我的low比手机是好的   

修改上面的class    

.modal-open{overflow:hidden;positon:fixed;} 

参考文章是:https://www.zhihu.com/question/35453154    

当弹出隐藏的时候再把这个class去掉就能解决了。

弹出是我自己写的。。。。

不知道还有没有好的方法


参考:http://vr013.com/