移動端彈窗滾動時window窗體也一起滾動的解決辦法

桔子_Lynn發表於2017-01-12

在做移動端專案的時候發現，如果彈窗的內容很多很長，在滑動彈窗時，蒙層下面的window窗體也會跟著一起滾動，這樣帶來很差的視覺體驗：
當時也想了很多辦法，比如判斷滑動的元素，如果是彈窗裡面的元素則禁止window的滾動，如果不是，則window可以滾動

雖然在滑動彈窗的時候window體不滾動，但是當滑到彈窗邊緣的時候，window體依然滾動，後來小組長想出了一個辦法

即：在彈出彈窗的時候，設定window最外層定位為fixed，這樣window便不會滾動了，在關閉彈窗的時候，設定window體定位為static，window便可重新滾動。

程式碼如下：

HTML程式碼：

<div class="demo">
   <div class="btn">點選彈出彈窗</div>
   <p class="bottom-elem">底部元素</p>      
</div>
<div class="dialog-wrap">
   <div class="dialog">
      <div class="close-btn">點選關閉彈窗</div>
      <p class="dialog-bottom">底部元素</p>
   </div>
   <div class="layer"></div>
</div>

CSS程式碼：

.btn{
    width: 180px;
    height: 40px;
    background: #ff6677;
    text-align: center;
    line-height: 40px;
}
.bottom-elem{
    margin-top: 1500px;
}
.dialog-wrap{
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 99;
}
.dialog{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 450px;
    height: 500px;
    background: #fff;
    transform: translate(-50%,-50%);
    z-index: 100;
    overflow: auto;
    font-size: 26px;
}
.dialog-bottom{
    margin-top: 500px;
}
.layer{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.65);
    z-index: 99;
}
.close-btn{
    width: 150px;
    height: 50px;
    background: #e8db14;
    text-align: center;
    line-height: 50px;
    font-size: 20px;
}

JS程式碼：

$('.btn').on('tap',function(){
  $('.dialog-wrap').css('display','block');
  $('.demo').css('position','fixed');
});

$('.close-btn').on('tap',function(){
  $('.dialog-wrap').css('display','none');
  $('.demo').css('position','static');
});

效果如圖：

如上所示，無論彈窗滑到頂部還是底部，背景window窗體都不滑動。

雖然解決了問題，但是這樣的寫法有點投機取巧，後續需要想想更周全更高階的方法。

by新手小白的記錄

 

相關文章