今天遇到了一個手機端浮層彈窗的需求

要實現這個彈窗效果不麻煩，麻煩的是實現了這個效果之後只讓浮層裡面的內容滑動而不讓底下的內容滑動。

我從網上搜到的實現方法，據說也是bootstrap的實現方法：當彈窗的時候將body的overflow樣式設定為hidden

$("body").css("overflow","hidden");

你發現瀏覽器上沒有問題了，可如果只到了這一步事情遠遠沒有解決。如果你能夠區域網訪問，你會發現在手機上浮層底下的內容依然會動。我想到了使用這種方式解決：

1.獲取出現浮層時介面滾動的距離和記錄浮層狀態

var scrollTop=document.body.scrollTop||document
 
.documentElement.scrollTop;
var modelToggle=true;

2.使用onscroll監聽介面的滾動

window.onscroll=function(){
    if(modelToggle){//判斷是否已經打開了浮層
        $("body").css("top",scrollTop);//設定介面滾動的位置一直是浮層開啟的位置
    }
}

3.如果這個時候你的介面還是有問題你可以嘗試著給你的body的css樣式設定一些初始值

body{
    position:fixed;
    top:0;
    overflow:auto;
}
 

希望能夠幫到你。