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

Question

直接贴图

如图，这里有一个弹出的层，然后这个弹出层是可以上下滚动的
但是滚动它的同时，底部的那层也会跟着滚动，有时候只滚动了底层，而弹出层却不滚动，太蛋疼了。。。

有好的办法解决吗？ 搜了几个都没什么用。。

Answer 1

oMask.addEventListener('touchmove', function (event) {
            event.preventDefault();
},false);

guanggao.addEventListener('touchmove', function (event) {
            event.preventDefault();
},false);

禁止默认事件

Answer 2

这其实是手机浏览器一个非常“顽固”的也似乎难以解决默认事件。
我之前也遇到过，最初也是各种阻止默认事件啊，PC有用，但是移动端一点用也没有。
后来是加了

html,body{ height:100%, overflow:hidden }

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

Answer 3

弹出层滚不动很可能你是用了fixed布局，而且fixed层在元素中嵌套着,受了它父级的高度影响，而不是在body的子级下，安卓微信是不能滚的

Answer 4

document.addEventListener('touchmove', function (event) {

        //判断条件,条件成立才阻止背景页面滚动,其他情况不会再影响到页面滚动
        if (reson) {
            event.preventDefault();
        }
    })

Answer 5

html,body{ height:100%, overflow:hidden }

Answer 6

我也遇到过类似问题，不过用了iscroll之后就解决了

Answer 7

好像overflow：hidden能起作用，如果不起作用你可以试试让顶层界面获取焦点。我的想法，可能不可行。

Answer 8

外层监听 touchmove, 然后event.preventDefault(); 这法子可以

Answer 9

弹出层的时候事件绑定监听touchmove 阻止默认事件
弹出层关闭的时候移除事件绑定

Answer 10

说用event.preventDefault(); 的，阻止后，你们的fixed元素还能滚动？

Answer 11

请问下楼主是怎么解决的？谢谢！