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

引用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/

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值