相信大家在做移動端開發的時候會經常遇到這種場景，需要適時的彈出遮罩（有時為了突出還會在外面加上蒙層），彈窗出現以后，為了追求良好的用戶體驗，遮罩以下的屏幕是禁止滑動的。在網上找了很多資料，大體就這兩種做法，但都有不完善的地方。加上自己的思考和總結，想到一個辦法，應該可以解決你的問題。
a）大眾型
一般，大家想到的都是給body或者html添加overflow：hidden樣式，當然height要設置成100%。這樣在大多數機型上是可以的，但有個別的就是不起作用，我也不知道為什么（求知道的大神告知）。
b）高端型
因為這種需要彈窗遮罩的一般為移動端，pc很少會出現，就算是在pc里面上面那種方法也是可以解決的，所以可以考慮從移動端特有的滑動事件touchmove下手，當彈窗出現以后阻止該事件的默認行為不就行了嗎，於是又有了下面的方法。
1 $(document).on("touchmove",function(e) {
2 e.preventDefault();
3 })
這種方法在移動端是可以解決滑動的問題，但有種情景就顯得有點尷尬了，移動端屏幕本來就小，如果彈窗的內容過多也需要滑動（比如很長的活動規則），因為彈窗出現的時候已經禁止了滑動事件，那可如何是好？？？？
c）改進型
在這種情形之下我想到了另外一種完美的辦法，就是在禁止滑動之前先做一下判斷，如果是在彈窗中觸發的滑動事件就不阻止默認行為，其他地方同上。判斷那部分我是通過類名判斷的，通過其他的方法也是可以的（比如id），具體如下：
$(document).on("touchmove",function(e) {
if(e.target.className.indexOf("shadeBox") >= 0) {
e.preventDefault();
}
})
上面的類名shadeBox是彈窗的蒙層的類名。也就是在蒙層上面滑動，事件是被禁止的，剩下的一部分就是彈窗了，所以彈窗的內容可以滑動。
以上有什么說的不對的，或者第三種方法還有不試用的情景的，還望指出，大家共同學習進步\(^o^)/~
更新說明：
當我把這個東西分享給身邊人用的時候，最后還是發現了問題，果然群眾的眼睛還是雪亮的。問題如下：
當彈框內容過多，彈框也需要滑動的時候，因為彈框內部沒有禁止touchmove，所以是可以滾動的，問題是當滾動到最底部繼續往下滑的時候，奇怪的事情就發生了，此時頁面還是會發生滑動，(在最上面的時候和這道理一樣)。
我想的是可能彈框內部touchmove冒泡，然后到body上發生滑動。於是在彈框內部組織冒泡不就行了，於是做如下調整：
$(document).on("touchmove",function(e) {
if(e.target.className.indexOf("shadeBox") >= 0) {
e.preventDefault();
} else {
e.stopPropagation();
}
})
修改以后，發現然並卵。。。
不知道為什么彈框內部並沒有組織touchmove的冒泡，好奇怪。求知道的大神不吝告之。
現在的想法是，監聽滑動事件，當滑動到底部或者最頂端時，禁止touchmove，並根據手指滑動的方向來釋放開touchmove事件，即頂部的時候往下滑是放開事件，最底部的時候向上滑是放開事件。
雖然這邊說的簡單，但要實現這一功能確實太麻煩，如果只是在h5頁面里面，完全沒必要花這么多時間和精力在這個上面，如果是APP，追求極致那就另當別論了。
再說上面的情況是彈框內容過多的時候也需要滑動，如果彈框不需要滑動，跳出彈框以后直接全局禁用touchmove就好了，就沒有上面的問題了。
不知道還有沒有更好的做法？？？？？
參考鏈接：http://www.cnblogs.com/gaohui/p/5819777.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>Document</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style type="text/css">
* {
padding: 0px;
margin: 0px;
}
body {
height: 1000px;
}
#mask {
top: 0px;
left: 0px;
position: fixed;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
display: none;
}
#mask .div {
width: 300px;
height: 300px;
background: white;
position: absolute;
margin: auto;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
</style>
<script type="text/javascript">
$(function() {
/* 第一種方法：屏蔽鼠標滾輪滾動和touchmove事件，比較暴力
$("#cao").click(function() {
$("#mask").show(0,function(){
$("body").css('overflow','hidden');
});
})
$("#close").click(function() {
$("#mask").hide(0,function(){
$("body").css('overflow','scroll');
});
})
*/
//第二種方法[推薦]，屏蔽觸屏滑動事件，但是沒有屏蔽鼠標滾輪滾動
$("#cao").click(function() {
$("#mask").show()
});
$("#mask").on('touchmove',function(e){
e.preventDefault(); //阻止默認行為
})
$("#close").click(function() {
$("#mask").hide()
});
})
</script>
</head>
<body>
<div id="mask">
<div class="div">
<h4 id="close">haha</h4>
</div>
</div>
<p>111111111111111111111</p>
<p>222222222222222222222</p>
<p>333333333333333333333</p>
<p>111111111111111111111</p>
<p>222222222222222222222</p>
<p>333333333333333333333</p>
<p>111111111111111111111</p>
<p>222222222222222222222</p>
<p>333333333333333333333</p>
<p>111111111111111111111</p>
<p>222222222222222222222</p>
<p>333333333333333333333</p>
<p>111111111111111111111</p>
<p>222222222222222222222</p>
<p>333333333333333333333</p>
<p>111111111111111111111</p>
<div id="cao" style="margin: 0 auto;width: 300px;height: 300px;background: red;">
</div>
<p>222222222222222222222</p>
<p>333333333333333333333</p>
<p>111111111111111111111</p>
<p>222222222222222222222</p>
<p>333333333333333333333</p>
<p>111111111111111111111</p>
<p>222222222222222222222</p>
<p>333333333333333333333</p>
<p>111111111111111111111</p>
<p>222222222222222222222</p>
<p>333333333333333333333</p>
<p>111111111111111111111</p>
<p>222222222222222222222</p>
<p>333333333333333333333</p>
<p>111111111111111111111</p>
<p>222222222222222222222</p>
<p>333333333333333333333</p>
<p>111111111111111111111</p>
<p>222222222222222222222</p>
<p>333333333333333333333</p>
<p>111111111111111111111</p>
<p>222222222222222222222</p>
<p>333333333333333333333</p>
<p>111111111111111111111</p>
<p>222222222222222222222</p>
<p>333333333333333333333</p>
<p>111111111111111111111</p>
<p>222222222222222222222</p>
<p>333333333333333333333</p>
<p>111111111111111111111</p>
<p>222222222222222222222</p>
<p>333333333333333333333</p>
<p>111111111111111111111</p>
<p>222222222222222222222</p>
<p>333333333333333333333</p>
<p>111111111111111111111</p>
<p>222222222222222222222</p>
<p>333333333333333333333</p>
<p>111111111111111111111</p>
<p>222222222222222222222</p>
<p>333333333333333333333</p>
<p>111111111111111111111</p>
<p>222222222222222222222</p>
<p>333333333333333333333</p>
<p>111111111111111111111</p>
<p>222222222222222222222</p>
<p>333333333333333333333</p>
<p>111111111111111111111</p>
<p>222222222222222222222</p>
<p>333333333333333333333</p>
<p>111111111111111111111</p>
<p>222222222222222222222</p>
<p>333333333333333333333</p>
<p>111111111111111111111</p>
<p>222222222222222222222</p>
<p>333333333333333333333</p>
<p>111111111111111111111</p>
<p>222222222222222222222</p>
<p>333333333333333333333</p>
<p>111111111111111111111</p>
<p>222222222222222222222</p>
<p>333333333333333333333</p>
<p>111111111111111111111</p>
<p>222222222222222222222</p>
<p>333333333333333333333</p>
<p>111111111111111111111</p>
<p>222222222222222222222</p>
<p>333333333333333333333</p>
<p>111111111111111111111</p>
<p>222222222222222222222</p>
<p>333333333333333333333</p>
<p>111111111111111111111</p>
<p>222222222222222222222</p>
<p>333333333333333333333</p>
<p>111111111111111111111</p>
<p>222222222222222222222</p>
<p>333333333333333333333</p>
</body>
</html>
此時屏蔽滾動和PC鼠標滾動，比較暴力！！！！