禁止遮罩層以下屏幕滑動----正解(更新版)

相信大家在做移動端開發的時候會經常遇到這種場景，需要適時的彈出遮罩（有時為了突出還會在外面加上蒙層），彈窗出現以后，為了追求良好的用戶體驗，遮罩以下的屏幕是禁止滑動的。在網上找了很多資料，大體就這兩種做法，但都有不完善的地方。加上自己的思考和總結，想到一個辦法，應該可以解決你的問題。

a）大眾型

一般，大家想到的都是給body或者html添加overflow：hidden樣式，當然height要設置成100%。這樣在大多數機型上是可以的，但有個別的就是不起作用，我也不知道為什么（求知道的大神告知）。

b）高端型

因為有這種彈窗遮罩需求的，一般為移動端，pc很少會出現，就算是在pc的場景里有需要，上面那種方法也是可以解決的，所以可以考慮從移動端特有的滑動事件touchmove下手，當彈窗出現以后阻止該事件的默認行為（關閉彈窗后解除阻止）不就行了嗎，於是又有了下面的方法。

$(document).on('touchmove',function(e) {
    var e = e || window.event;
    e.preventDefault();
})

 

這種方法在移動端是可以解決滑動的問題，但有種情景就顯得有點尷尬了，移動端屏幕本來就小，如果彈窗的內容過多也需要滑動（比如很長的活動規則），因為彈窗出現的時候已經禁止了滑動事件，那可如何是好？？？？

c）改進型

在這種情形之下我想到了另外一種完美的辦法，就是在禁止滑動之前先做一下判斷，如果是在彈窗中觸發的滑動事件就不阻止默認行為，其他地方同上。判斷那部分我是通過類名判斷的，通過其他的方法也是可以的（比如id），具體如下：

$(document).on("touchmove",function(e) {
    var e = e || event,
　　　 target = e.target || e.srcElement;
    if(e.target.className.indexOf("shadeBox") >= 0) {        
        e.preventDefault(); 
    } 
})

 

上面的類名shadeBox是彈窗的蒙層的類名。也就是在蒙層上面滑動，事件是被禁止的，剩下的一部分就是彈窗了，所以彈窗的內容可以滑動。

以上有什么說的不對的，或者第三種方法還有不試用的情景的，還望指出，大家共同學習進步\(^o^)/~

 

更新說明：

　　當我把這個東西分享給身邊人用的時候，最后還是發現了問題，果然群眾的眼睛還是雪亮的。問題如下：

當彈框內容過多，彈框也需要滑動的時候，因為彈框內部沒有禁止touchmove，所以是可以滾動的，問題是當滾動到最底部繼續往下滑的時候，奇怪的事情就發生了，此時頁面還是會發生滑動，(在最上面的時候和這道理一樣)。

我想的是可能彈框內部touchmove冒泡，然后到body上發生滑動。於是在彈框內部阻止冒泡不就行了，於是做如下調整：

$(document).on("touchmove",function(e) {
    var e = e || event,
　　　 target = e.target || e.srcElement;
    if(e.target.className.indexOf("shadeBox") >= 0) {  
        e.preventDefault(); }
    else { 
        e.stopPropagation(); 
    } 
})

 

修改以后，發現然並卵。。。

不知道為什么彈框內部並沒有阻止touchmove的冒泡，好奇怪。

現在的想法是，監聽滑動事件，當滑動到底部或者最頂端時，禁止touchmove，並根據手指滑動的方向來釋放開touchmove事件，即頂部的時候往下滑是放開事件，最底部的時候向上滑是放開事件。

雖然這邊說的簡單，但要實現這一功能確實太麻煩，如果只是在h5頁面里面，完全沒必要花這么多時間和精力在這個上面，如果是APP，追求極致那就另當別論了。

再說上面的情況是彈框內容過多的時候也需要滑動，如果彈框不需要滑動，跳出彈框以后直接全局禁用touchmove就好了，就沒有上面的問題了。

不知道還有沒有更好的做法？？？？？