CSS移动端在有弹出层时如何禁止底层的滚动

在一个网页中,如果有一个弹出的层是可以上下滚动的。 但是弹出层滚动到底部时,底层也会跟着滚动。
这其实是手机浏览器一个非常“顽固”的也似乎难以解决默认事件。
我之前也遇到过,最初也是各种阻止默认事件啊,PC有用,但是移动端一点用也没有。
后来是加了
html,body{ height:100%, overflow:hidden }

但是这样做会导致内容返回顶部。
后来研究了下天猫,他们也没有很好的解决,有的地方底部仍然可以滑动。
研究过苏宁易购,他们做的比较有意思,先记录下当前的位置,虽然底部内容也是可以滑动的,当弹出层关闭后,再返回那个位置。当然他们的弹出层是全屏没有透明度的,但是对于这样有透明遮罩层就不行了。
后来想想,影响也不大也就不管了。
真要做的话,像iscroll构建页面,滑动是通过CSS3 transform变化实现缓冲来做的或许可以解决。
可以去体验下天猫触屏版,他们的左侧弹出菜单那样,虽然你在头部滑动,底下依然会滚动,不过真可以解决一些问题。


具体点,我们可以通过js动态给html和body标签加一个class=“noscroll”样式,然后在样式表添加
.noscroll{height: 100%;overflow: hidden;}
记得隐藏弹出层后,要去掉noscroll样式,不然页面就无法滚动了哦

 

参考:

https://www.yaxi.net/2018-01-10/1655.html
https://segmentfault.com/q/1010000004885161/a-1020000004889707
 

修改时间 2018-04-12

真诚赞赏,手留余香
赞赏
随机推荐
解决Mysql Workbench的Error Code: 1175错误
Node.js 递归遍历目录
xcode ios 模拟器没有HOME按键解决方法
使用 Photoshop 创建矢量图标库 Iconfont
Wordpress 增加文章阅读次数或点赞次数(非插件实现)
babel-preset-env 一个就够了
实现Thinkcmf面包屑导航
Windows Server 2008 R2 实现网络流量的监控和限制
Div保持高宽比
AI 制作的图标上传到 iconfont 以后丢失描边的解决办法