移动端弹出穿透问题(弹出层弹出后body还能滑动)
2017-04-18 16:53
429 查看
引用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去掉就能解决了。
弹出是我自己写的。。。。
不知道还有没有好的方法
------------------------------------总结---------------
如果是自己写的弹出层
我们只要对于body加上一个class
.modal-open{overflow:hidden;positon:fixed;}
那么就可以body不会滚动了,
当弹出隐藏的时候再把这个class去掉就能解决了。
参考:http://vr013.com/
//判断条件,条件成立才阻止背景页面滚动,其他情况不会再影响到页面滚动
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去掉就能解决了。
弹出是我自己写的。。。。
不知道还有没有好的方法
------------------------------------总结---------------
如果是自己写的弹出层
我们只要对于body加上一个class
.modal-open{overflow:hidden;positon:fixed;}
那么就可以body不会滚动了,
当弹出隐藏的时候再把这个class去掉就能解决了。
参考:http://vr013.com/
相关文章推荐
- 移动端弹出层弹出 body还能滚动(滚动穿透)
- Modal模态框的防穿透问题,模态框弹出后,禁止body滑动事件
- 移动端body跟着模态框一起滑动问题
- 移动端弹出层滚动穿透问题总结
- vue解决弹出蒙层滑动穿透问题的方法
- 移动端弹出层滚动时禁止body滚动
- 移动端页面滚动穿透问题解决方案
- 关于html页面移动端软键盘弹出时影响页面布局的问题
- 【Ext JS】【FAQ】alert弹出框的标题始终不能靠左问题——原因是body的css中配置了text-align:center
- 移动端解决fixed和input获取焦点软键盘弹出影响定位的问题
- 移动端弹出阴影遮罩的几点问题和解决方法
- 移动端滚动穿透问题完美解决方案
- 移动端jQuery修正Web页面滑动时div问题的两则实例
- 关于移动端h5页面不能滑动问题的解决办法
- 如何实现移动端弹出层弹出的时候页面不能滑动,关闭弹出层时页面恢复滑动
- 解决移动端点击事件的穿透问题之CSS3新属性:pointer-events
- Zepto tap 穿透bug、解决移动端点击穿透问题
- 移动端点击穿透和click事件300ms延迟问题
- jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)
- 移动端解决fixed和input获取焦点软键盘弹出影响定位的问题