在一个网页中，如果有一个弹出的层是可以上下滚动的。 但是弹出层滚动到底部时，底层也会跟着滚动。
这其实是手机浏览器一个非常“顽固”的也似乎难以解决默认事件。
我之前也遇到过，最初也是各种阻止默认事件啊，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



真诚赞赏，手留余香

微信支付