PC端/移动端如何禁止底层页面滚动
2018-04-04 17:17
375 查看
今天在写一个首页,移动端底部有个导航按钮,导航里的选项只有在点击导航按钮时才会以弹出层/遮罩层的方式显示。如下图所示:
用js和css3写完动画后,在PC上的chrome浏览器里测试手机的效果时,没有问题,鼠标拖动/滚动,遮罩层底下的body可以滚动。但是拿手机真机测试时,出现以下问题:
Safiri/Andriod手机自带浏览器:遮罩层显示后,手指滑动屏幕,浏览器底部自带的导航栏会自动隐藏,遮罩层就会往下移动浏览器自带导航栏高度的距离,导致页面顶部出现同样高度的无遮罩层覆盖的区域。然后等自带的导航栏全部隐藏后,顶部的露白也消失。原因是,遮罩层的高度设置的是100%,浏览器自带导航栏消失导致前后浏览器的视口高度不一样,所以动态变化了。见下图:
解决问题的方法是:给body增加监听事件,当遮罩层出现时,禁止屏幕触摸移动事件,消失时恢复。
方法一:
document.body.parentNode.style.overflow = "hidden"; //禁止横竖向滚动条
方法二:
1、先创建一个函数:
function bodyScroll(e){
e.preventDefault(); //取消事件默认动作
e.stopPropagation(); //不再派发事件
}2、然后在遮罩层出现后增加监听事件函数:
document.addEventListener("touchmove",bodyScroll,false);
方法二,我是在这里看的人家写的文章:
用js和css3写完动画后,在PC上的chrome浏览器里测试手机的效果时,没有问题,鼠标拖动/滚动,遮罩层底下的body可以滚动。但是拿手机真机测试时,出现以下问题:
Safiri/Andriod手机自带浏览器:遮罩层显示后,手指滑动屏幕,浏览器底部自带的导航栏会自动隐藏,遮罩层就会往下移动浏览器自带导航栏高度的距离,导致页面顶部出现同样高度的无遮罩层覆盖的区域。然后等自带的导航栏全部隐藏后,顶部的露白也消失。原因是,遮罩层的高度设置的是100%,浏览器自带导航栏消失导致前后浏览器的视口高度不一样,所以动态变化了。见下图:
解决问题的方法是:给body增加监听事件,当遮罩层出现时,禁止屏幕触摸移动事件,消失时恢复。
方法一:
document.body.parentNode.style.overflow = "hidden"; //禁止横竖向滚动条
document.body.parentNode.style.overflow = "auto"; //恢复横竖向滚动条以上代码在PC端上有效,但是在移动端失效。因此需要方法二。
方法二:
1、先创建一个函数:
function bodyScroll(e){
e.preventDefault(); //取消事件默认动作
e.stopPropagation(); //不再派发事件
}2、然后在遮罩层出现后增加监听事件函数:
document.addEventListener("touchmove",bodyScroll,false);
3、在遮罩层小时候去除增加的监听事件函数:
document.removeEventListener("touchmove",bodyScroll,false);此方法在移动端的Safiri/Chrome/QQ浏览器都是有效的,在UC浏览器无效,手指滑动还是会滚动,但是不会露白了。
方法二,我是在这里看的人家写的文章:
JS添加事件和解绑事件:addEventListener()与removeEventListener()
点击打开链接相关文章推荐
- 移动端h5页面弹窗出来后,禁止底层的背景页滚动
- 移动端页面禁止鼠标滑轮滚动的方法
- 禁止页面滚动(移动端)
- js禁止和启用移动端页面内容滚动
- 如何禁止页面滚动事件
- 移动端和PC端遮罩层弹出后,页面禁止滚动的解决方法
- 如何显示遮罩层时禁止底层页面滑动
- jquery 禁止页面滚动-移动端
- 如何判断页面是由移动端还是pc端打开
- 用jq让移动端和PC端遮罩层弹出后页面禁止滚动
- 移动端弹出层后禁止背景底层 body滚动
- PC端,移动端禁止页面滚动
- 弹出弹窗后,如何禁止底层的body滚动
- Javascript禁止父元素滚动条滚动, pc、移动端均有效
- 移动端如何禁止body的滚动
- 如何禁止页面滚动
- 如何在PC上查看一个web页面在移动端的展示效果
- 如何做滚动加载?移动端下拉加载新的页面
- 移动端禁止页面滚动
- 移动端页面 弹出框滚动,底部body锁定,不滚动 / 微信网页禁止回弹效果