vue 弹层弹起 底部内容禁止滚动 并且保留当前滚动条高度

前沿

---

这是一个通用的需求，当页面提示框弹起禁止下边的内容滚动，并且保留滚动到的当前的高度，我是在vue公共的方法中写的，全局通用。

第一步：先在你的公共css里边写入这个样式

.dialog-open {
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
}

第二步 ：在你的公共js里边写入这个方法，导入全局，现在还不知道怎么注册全局方法的，请移步

关于vue全局引用公共的js和公共的组件的折腾

// 判断有无class
function hasClass(name) {
  let reg = new RegExp('(^|\\s)' + name + '(\\s|$)');
  return reg.test(document.body.className);
}

export default {
  // body 添加 class 阻止滚动穿透
  addClass(name){
    if (hasClass(name)) {
      return;
    }
    let bodyScrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    if (document.body.className === '') {
      document.body.className += name;
    } else {
      let newClass = document.body.className.split(' ');
      newClass.push(name);
      document.body.className = newClass.join(' ');
    }
    document.body.style.top = -bodyScrollTop + 'px';
  },
  // body 删除 class 恢复滚动
  removeClass(name) {
    if (hasClass(name)) {
      let styleTop = Math.abs(parseInt(document.body.style.top));
      document.body.removeAttribute('style');
      document.body.className = document.body.className.replace(new RegExp('(\\s|^)' + name + '(\\s|$)'), '');
      document.body.scrollTop = document.documentElement.scrollTop = styleTop;
    }
  },
}

记得要导入在全局哦

第三步 ：在你的弹层组件内使用

//弹层弹起
this.addClass('dialog-open'); // 阻止滚动穿透
//弹层消失
this.removeClass('dialog-open');

结束语

这个方法本人在项目中使用，用户体验很好，不回像直接写overflow:hidden那样还会回到顶部，会保留当前滚动条的高度。有什么不足的地方，大家多多留言。