现在大多数页面都是采用主题内容水平居中布局，但是，这种布局存在一个问题。现在的浏览器滚动条默认是overflow:auto类型的，也就是说如果内容高度不足一屏，没有滚动条；
如果超出才会出现滚动条。滚动条也是占据屏幕尺寸的，从没有滚动条到有滚动条会使页面左右抖动一下。
现有三种解决方法：

让垂直滚动条一直显示

1
2
3
body {
    overflow-y: scroll;
}

即使内容高度不足一屏也会显示滚动条，比较影响用户体验

当内容高度超过一屏时，在浏览器左侧同时加上一个滚动条宽的的padding或margin

1
2
3
.wrap-outer {
    margin-left: calc(100vw - 100%);
}

margin换成padding一样可以生效

推荐使用兼容写法

1
2
3
4
5
6
7
8
html {
    overflow-x: hidden;
    overflow-y: auto;
}
body {
    width: 100vw;
    overflow: hidden;
}