移動端彈出層滾動穿透問題總結

標籤：

移動端彈出層(簡稱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

移動端彈出層滾動穿透問題總結