关于弹窗滚动穿透的问题

众所周知！滚动穿透真是一个遗臭万年的问题，困扰着许多程序猿的一大难题。

事发场景：

当在弹出的模态框上面进行拖动的时候，其下面的页面也会随之进行滚动，这真是一个很不好的用户体验，特定情况下也会产生比较严重的BUG。

---

下面我与大家分享一下解决这个遗臭万年问题的方法

modal: (function (bodyCls) {
   var scrollTop;
   return {
     afterOpen: function () {
       scrollTop = document.scrollingElement.scrollTop;
       document.body.classList.add(bodyCls);
       document.body.style.top = -scrollTop + 'px';
     },
     beforeClose: function () {
       document.body.classList.remove(bodyCls);
       document.scrollingElement.scrollTop = scrollTop;
     }
   };
 })('modal-open')

没错~ 以上代码中有两个方法，可以在弹窗弹出的时候和弹窗关闭的时候分别去调用，简单实用~

'mtPopup':{
  handler(val, oldVal){
    if(val){
       this.modal.afterOpen()
     }else{
       this.modal.beforeClose()
     }
   }
 }

依照当前项目的业务场景，我这里去监听了这个弹窗开关的状态从而分别调用不同的方法。

这样我们就可以将这个难缠的问题彻底解决掉了~