overflow:hidden引起的页面晃动问题

1、文章引言

我们在实现页面弹层的时候，弹层后面一般都会有黑色半透明全屏的遮罩，一般会对这个遮罩元素设置position:fixed定位。当页面出现滚动条并且遮罩出现的时候，如果我们滚动鼠标会发现遮罩后面的网页是可以滚动的，这样的话可能会将用户的注意力从弹层转移到其背后的网页上，这样给用户的感觉不是很好。针对这个问题，我们可以通过给根元素添加overflow:hidden属性去解决。后来经过实践发现，这样做的话又引出了另外一个问题，问题如下gif图所示。

2、问题描述

细心的同学可以发现，就是当点击按钮蒙层出现的时候网页的主体向右偏移了一些，当蒙层消失的时候，网页主体往回偏移回到了原来的地方。

3、问题原因

我们知道浏览器的滚动条是占据一定的宽度，当给根元素添加overflow:hidden属性的时候，滚动条的消失会导致页面可用宽度的变化，页面就会产生晃动。

4、如何解决

既然知道了页面晃动是因为滚动条的消失引起，那么当蒙层出现的时候，我们可以通过给根元素填充一个透明的右边框borderRight属性，宽度值和消失的滚动条一样，这样就可以解决问题了。

  var widthBar = 17; //浏览器滚动条的宽度
  var root = document.documentElement;
  var button = document.querySelector('.js-btn');
  var modal = document.querySelector('.js-modal');

  //show modal
  button.onclick = function() {
    if (typeof window.innerWidth == 'number') {
      widthBar = window.innerWidth - root.clientWidth;
    }
    root.style.overflow = 'hidden';
    root.style.borderRight = widthBar +'px solid transparent';
    modal.style.display = 'block';
  }

  //hide modal
  modal.onclick = function() {
    root.style.overflow = '';
    root.style.borderRight = '';
    modal.style.display = 'none';
  }
复制代码

在这里在特别说明一下，不同的浏览器滚动条宽度会有所差异。我这边经过测试的话，在chrome、firefox、百度浏览器、360浏览器、safari下为17px，win7下的ie7/ie8为21px，win7下的ie9+以上是17px，win10下的edge是16px！

修改之后的效果预览：

5、小结

如果有什么疑问或者更好的建议，欢迎在评论区留言。文笔有限，文中若有不正之处，万望告知！