如何解决滚动条使页面跳动的问题

这是很久之前遇到的问题，今天用自己的话重新总结一下，加深自己的印象，大家可以看我的理解，也可以看原博文

这个问题出现在滚动条时有时无，而且左右margin使用了auto的情况下。

当没有滚动条时，页面总的可见宽度为width，container用了subWidth，然后使用

margin：0 auto

使页面居中，结果左右边距为（width-subWidth）/2

此时，点击另一个页面，滚动条出现，页面总的可见宽度变成(width-滚动条宽度)，container的宽度还是subWidth，然后左右边距就变成(width-滚动条宽度-subWidth)/2，所以，你知道为什么你的页面会跳动了吧。

那么怎么解决这个问题呢？

让左边距固定下来呀！

但是左边距怎么固定下来？固定下来之后页面内容还会居中吗？我要怎么设置才能让页面内容始终居中而且不跳动？

要让页面内容始终居中，而且不跳动？！

页面始终居中而且不跳动，那么页面就要参照一个容器，这个容器不管滚动条出不出现，宽度都是固定的。而这个容器的宽度，实际上就是100vw的定义，100vw不同于100%，当没有滚动条时，100vw=100%，当有滚动条时，100vw=100%+滚动条宽度。

下面就是张旭鑫博文的终极解决方案

*{
margin:0;
padding:0;
}
html {
overflow-y: scroll;/*这一行代码会被 代码1 覆盖，我觉得是可以删除的，可能作者考虑到有可能下面的失效，那么不管有没有滚动条，在右边都会有一个灰色的区域，这也是一种解决方案，就是不管有没有滚动条，都预留位置，但是很难看啊*/
}

:root {
overflow-y: auto;/*代码1*/
overfl
9ce6
ow-x: hidden;/*横向就不使用滚动条*/
}

:root body {
position: absolute;/*很不好意思，至今我仍然不知道为什么要这句代码，知道了我再补充*/
}

body {
width: 100vw;
overflow: hidden;/*超出100vw的内容都隐藏，实际我们设计的页面都不会超过100vw，而且一般会边距，所以一般滚动条的出现不会遮盖到内容*/
}