解决窗口滚动条消失而导致的页面内容抖动的问题

前言

今天在项目中遇到了这样一个问题，点击按钮出现遮罩层和弹窗，不过弹窗出现后还是可以滚动底部的页面，于是写了一段js使弹窗出来后使底部页面增添overflow: hidden的样式解决了这个问题，但是还有一个细节问题就是页面的滚动条也占据宽度，滚动条消失后会有一个抖动的效果，给人体验很不好

正文

尝试了几个办法，以下是个人认为比较好的解决办法：

首先获取窗口文档显示区的宽度和DOM文档的根节点html元素对象的宽度，前者减去后者计算出滚动条的宽度

// 滚动条宽度
let scrollWidth = window.innerWidth - document.documentElement.offsetWidth;

弹窗打开时，滚动条消失先给body元素设置overflow:hidden防止底部页面滚动，然后再给底部页面右侧的padding 设置scrollWidth的值来模拟滚动条存在时底部页面内容的位置

document.body.style.overflow = 'hidden';
this.$refs.index.style.paddingRight = scrollWidth + 'px';

弹窗关闭时，body元素设置overflow:auto，因为弹窗关闭时弹窗又恢复了，重新获取 scrollWidth 的值设置padding为0，这样底部页面的内容就不会在抖动啦，以下为完整代码（不是一个组件的方法，主要逻辑就是上面的代码）

show() {
      this.isShow = !this.isShow;
      // 滚动条宽度
      let scrollWidth = window.innerWidth - document.documentElement.offsetWidth;
      document.body.style.overflow = 'hidden';
      this.$refs.index.style.paddingRight = scrollWidth + 'px';
}
close() {
      this.isShow = false;
      this.$parent.show();
      document.body.style.overflow = 'auto';
}

结语

以上就是问题的解决方法，实际上并没有多难的东西，这是我第一次写博客（感觉心里想的东西能写明白还挺费劲的）写了半天哈哈哈，希望能为你们解决一点问题，有更好的方法欢迎各位大佬指点。