問題

移動端當(dāng)有 fixed 遮罩背景和彈出層時，在屏幕上滑動能夠滑動背景下面的內(nèi)容。

方案一

首先我們嘗試著用

//打開彈框時
$("html,body").css({"overlow":"hidden"});
//關(guān)閉彈框時
$("html,body").css({"overlow":"auto"});

發(fā)現(xiàn)在pc端起了作用，但在移動端還是不行，遮罩下面的可以滾動。overflow在移動端無效。

方案二

在彈出層的touchmove事件中調(diào)用preventDefault

如果彈出層本身是有滾動條的話，將會導(dǎo)致彈出層無法滾動。適用于彈出層本身不需要滾動（條）。

方案三

當(dāng)彈出層本身需要滾動時，兩個工具方法：

//打開彈框時
fixedBody:function(){
    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    document.body.style.cssText += 'position:fixed;top:-'+scrollTop+'px;';
},
//關(guān)閉彈框時
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 = '';
}

在彈出層顯示之前，記錄當(dāng)前的滾動位置，使body脫離文檔流，把脫離文檔流的body拉上去；
在關(guān)閉彈框?qū)訒r，讓body回到了文檔流中，再滾回到老地方。