移动端滚动穿透问题解决方案

问题

移动端当有 fixed 遮罩背景和弹出层时，在屏幕上滑动能够滑动背景下面的内容。

方案一

首先我们尝试着用

//打开弹框时
$("html,body").css({"overlow":"hidden"});
//关闭弹框时
$("html,body").css({"overlow":"auto"});

发现在pc端起了作用，但在移动端还是不行，遮罩下面的可以滚动。overflow在移动端无效。

方案二

在弹出层的touchmove事件中调用preventDefault

如果弹出层本身是有滚动条的话，将会导致弹出层无法滚动。适用于弹出层本身不需要滚动（条）。

方案三

当弹出层本身需要滚动时，两个工具方法：

//打开弹框时
fixedBody:function(){
    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    document.body.style.cssText += 'position:fixed;top:-'+scrollTop+'px;';
},
//关闭弹框时
looseBody:function() {
    var body = document.body;
    body.style.position = '';
    var top = body.style.top;
    document.body.scrollTop = document.documentElement.scrollTop = -parseInt(top);
    body.style.top = '';
}

在弹出层显示之前，记录当前的滚动位置，使body脱离文档流，把脱离文档流的body拉上去；
在关闭弹框层时，让body回到了文档流中，再滚回到老地方。