移动端如何禁用底层的滚动事件，保证弹出层的滚动事件正常运行？

Question

尝试过body，html加属性overflow:hidden,pc端可以，移动端不行

Answer 1

之前看到的一个解决方法，你看下是否可以：
https://uedsky.com/demo/modal...

Answer 2

用$("body").bind("touchmove",function(event){event.preventDefault;//code});取消了body的拖动事件。

恢复这个拖动事件只要$("body").unbind("touchmove");

Answer 3

弹出的遮罩层可以修改为：

{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

然后在弹出层禁用touchmove。
也可以通过禁止冒泡也可以。

Answer 4

有很多方法,常见的

$('body').css({
    overflow: 'hidden',
    height: $(window).height() + 'px'
})
// 因为body的高度等于了window的高度,所以滚动自然就无法进行了,如果需要滚动了,只需要把高度从style标签上面移除就好了

$('body').css({
    overflow: null,
    height: null
}) // 删除style中相应的属性

Answer 5

目前我找到的最合适的方法是：判断event.srcElement是否为弹出层的子元素，如果是则不禁用body的默认事件，如果不是则禁用body的默认事件，当然还是会有bug

Answer 6

body加上position:relative，在移动端overflow:hidden就会生效

html, body {
    position: relative;
    height: 100%;
    overflow: hidden;
}