移动端和PC端遮罩层弹出后,页面禁止滚动的解决方法
2017-10-09 09:27
603 查看
解决方案PC端
pc端的解决思路就是在弹出遮罩层的时候取消已经存在的滚动条,达到无法滚动的效果。
也就是说给body添加overflow:hidden属性即可,IE6、7下不会生效,需要给html增加overflow:hidden属性。
解决方案移动端
移动端取消滚动条是达不到效果的,这时就需要去除遮罩层和按钮层的touchmove的默认事件,代码如下:
pc端的解决思路就是在弹出遮罩层的时候取消已经存在的滚动条,达到无法滚动的效果。
也就是说给body添加overflow:hidden属性即可,IE6、7下不会生效,需要给html增加overflow:hidden属性。
解决方案移动端
移动端取消滚动条是达不到效果的,这时就需要去除遮罩层和按钮层的touchmove的默认事件,代码如下:
1 $('.add,#bg').bind("touchmove",function(e){ 2 e.preventDefault(); 3 });
相关文章推荐
- 用jq让移动端和PC端遮罩层弹出后页面禁止滚动
- 弹出遮罩层,禁止蒙层底部页面跟随滚动
- 移动端页面禁止鼠标滑轮滚动的方法
- 移动端弹出阴影遮罩的几点问题和解决方法
- iframe子页面弹出框遮罩层问题的解决方法
- 移动端页面 弹出框滚动,底部body锁定,不滚动 / 微信网页禁止回弹效果
- PC端,移动端禁止页面滚动
- 手机端当页面弹出遮罩层的时候,遮罩后面的页面禁止滚动且“锁定当前位置”
- 移动端弹出层上禁止页面滚动
- 禁止页面滚动的详细解决方法介绍
- Bootstrap的模态框遮罩在iframe子页面弹出时不能覆盖父页面的解决方法
- 移动端touch事件影响click事件以及在touchmove添加preventDefault导致页面无法滚动的解决方法
- 移动端touch事件影响click事件以及在touchmove添加preventDefault导致页面无法滚动的解决方法
- 禁止在弹出窗口上做任何操作均生成一个相同新页面的方法
- 关于切换页面时自动滚动到有RecyclerView的位置的解决方法
- .net 弹出消息框后导致页面样式变乱解决方法
- 添加遮罩时禁止滚屏,同时已经滚动的页面不会跑到最顶部去然后划不动
- mui框架 页面无法滚动解决方法
- 一打开页面就弹出警告框,本应该表单为空时才弹出的,求教原因及解决方法!!!
- 禁止灵格斯2.7弹出“新奇英语 互动锐词”广告窗口的解决方法