移动端弹窗滚动时window窗体也一块儿滚动的解决办法

时间 2019-12-12

原文原文链接

在作移动端项目的时候发现，若是弹窗的内容不少很长，在滑动弹窗时，蒙层下面的window窗体也会跟着一块儿滚动，这样带来不好的视觉体验：
当时也想了不少办法，好比判断滑动的元素，若是是弹窗里面的元素则禁止window的滚动，若是不是，则window能够滚动css

虽然在滑动弹窗的时候window体不滚动，可是当滑到弹窗边缘的时候，window体依然滚动，后来小组长想出了一个办法spa

即：在弹出弹窗的时候，设置window最外层定位为fixed，这样window便不会滚动了，在关闭弹窗的时候，设置window体定位为static，window即可从新滚动。3d

代码以下：code

HTML代码：orm

<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代码：blog

.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代码：it

$('.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');
});

效果如图：io

如上所示，不管弹窗滑到顶部仍是底部，背景window窗体都不滑动。function

虽然解决了问题，可是这样的写法有点投机取巧，后续须要想一想更周全更高级的方法。form

by新手小白的记录