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

在做移动端项目的时候发现，如果弹窗的内容很多很长，在滑动弹窗时，蒙层下面的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新手小白的记录