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

在实现蒙层的时候通常都是通过position:fixed去实现，当蒙层出现的时候，我们滚动鼠标的时候会发现蒙层后面的网页背景内容是依然可以滚动的，这样给用户的体验不是很好，针对pc桌面端的项目，可以通过给根元素添加overflow:hidden属性去解决。

这样做的话依然会有一个小小的问题，具体如下gif图所示：

1、出现的问题

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

2、问题原因

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

3、如何解决

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

实现的js代码如下：

最后的效果：

更多专业前端知识，请上 【猿2048】www.mk2048.com