纯CSS解决滚动条显示和消失时导致页面抖动的问题_css滚动条引起抖动

问题：

我在使用 ElementPlus 时发现，弹出对话框界面后，界面右边的滚动条会消失，进而导致 body 变宽，使整个页面发生抖动。

我先在网上搜索有没有合适的办法，但找到的方法都不太适合我的情况。

我找到了如下所示的 css，但是对我的页面来说，会挡住顶部导航栏右边的头像。

body {
  margin: 0 calc((100vw - 100%) * -1) 0 0;
  overflow-x: hidden;
}
1
2
3
4

100vw - 100% 计算的是滚动条的宽度。100vw 是浏览器窗口宽度（包括滚动条），100% 是网页宽度（不包括滚动条）。所以这两个值相减，就可以得到滚动条的宽度。

使用上面的css的效果是这样的。

可以明显的看到，我网页右上角的头像被滚动条遮住了。

解决

只需再添加一个 padding-right 即可解决。

body {
  margin: 0 calc((100vw - 100%) * -1) 0 0;
  padding-right: calc(100vw - 100%);
  overflow-x: hidden;
}
1
2
3
4
5

完美解决。