移动端body跟着模态框一起滑动问题

 遇到了一个问题，是点击链接出现弹框，弹框里面的内容是可以滑动的，结果我滑动的时候发现下面的body也跟着一起滑动，先看一下代码。

弹框的 HTML：

<div class="mask">
<div class="reserve">
<span class="close">X</span>
<div class="title">title</div>
<div class="content">
　　　　　　//很多内容
</div>
</div>
</div>

弹框的 CSS ：

.mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
z-index: 990;
background: rgba(0, 0, 0, .7);
}
.reserve {
position: relative;
width: 90%;
height: 80%;
z-index: 999;
overflow: auto;
border-radius: 10px;
margin: 100px auto;
background-color: #fff;
}

这样写确实没问题，但是问题也跟着来了，滑动内容的时候body也会跟着滑动，下面是解决办法。

给 html 和 body 都加上

.ban_body {
height: 100%;
overflow: hidden;
}

我是这样解决的 ：当点击按钮的时候为 html 和 body 加上  .ban_body ，这样body就不跟着一起滑动了。

$(document).on("click",".btn", function () {
$("html,body").addClass("ban_body")
$(".mask").show(100);
})

关闭的时候别忘删掉哦。