移動端body跟著模態框一起滑動問題

標籤：isp   pos   一起   rgba   position   rgb   刪掉   ack   mask   

 遇到了一個問題，是點選連結出現彈框，彈框裡面的內容是可以滑動的，結果我滑動的時候發現下面的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);    })

關閉的時候別忘刪掉哦。

移動端body跟著模態框一起滑動問題