移动端弹出层滚动穿透问题总结

移动端弹出层(简称layer)时，层内有大量文字需要滚动，但是背景层(简称body)会随着layer的滚动而滚动，用户体验较差。参考了网上的一些资料，总结解决方案如下：

.scrollFix{
　　height: 100%;
　　overflow: hidden;
　　position: relative;
}
.scrollFix body{
　　height: 100%;
　　overflow: hidden;
}

弹出层前:

//防止body层向下滚动后出现内容显示不全的问题
$('html,body').animate({scrollTop: 0}, 100);

$('html').addClass('scrollFix');

弹出层关闭后(一般是层的关闭回调):

$('html').removeClass('scrollFix');

 

还有一种禁用背景层touchmove事件的方法

function ShowLayer(){
　　bgDom.ontouchmove=function(e){
　　　　e.preventDefault && e.preventDefault();
　　　　e.returnValue=false;
　　　　e.stopPropagation && e.stopPropagation();
　　　　return false;
　　}
}
或者
function fScrollFix(e){
　　e.preventDefault();
　　e.stopPropagation();
}
bgDom.addEventListener('touchmove',fScrollFix,false);

function CloseLayer()
{
　　bgDom.ontouchmove=function(e){
　　　　e.preventDefault && e.preventDefault();
　　　　e.returnValue=true;
　　　　e.stopPropagation && e.stopPropagation();
　　　　return true;
　　}
}
或者
bgDom.removeEventListener('touchmove',fScrollFix,false);

bgDom为背景层dom对象,此方案笔者实验未成功

 

参考：http://segmentfault.com/q/1010000003089816

　　　http://www.w3cfuns.com/article-5600528-1-1.html

　　　http://zhangzhaoaaa.iteye.com/blog/2105145