vue之移动端滑动穿透问题

写这篇博客的只是为了记录项目中遇到的问题，希望能帮助自己和遇到同样问题的小伙伴，话不多说，直接上代码就完事啦！

一，css代码

//在弹出层显示时要给body加上fixed，使其失去滚动功能，同时会丢失原有的滚动位置，所有要先把此时body的滚动位置记录下来
body.mask-open{
  position: fixed;
  width: 100%;
}

二，js代码
当弹层弹出时要记录下body的滚动条滚动位置，等弹层关闭后要滚动到弹出前的位置

/**
   * 弹窗滚动穿透
   * @param {Boolean} state [弹窗状态]
   */
  overbody(state,_this){
    if(state){
    //记录此时滚动条位置
      _this.scrollTop = getScrollTop();
    // 使body固定定位，脱离文档流
    document.body.classList.add('mask-open'); 
    
    // 把脱离文档流的body拉上去！否则页面会回到顶部！
    document.body.style.top = -_this.scrollTop + 'px';
    }else{
       // body去除固定定位，回到了文档流中
      document.body.classList.remove('mask-open');
      // 回打开前滚动条位置
      goScrollTop(_this.scrollTop);
      _this.scrollTop = 0;
    }
    function goScrollTop(scrollTop){
      document.body.scrollTop = document.documentElement.scrollTop = scrollTop;
    }
    function getScrollTop(){
      return document.body.scrollTop || document.documentElement.scrollTop;
    }
  },