css：浏览器滚动条出现时页面宽度会缩窄页面抖动

解决方式如下

方式一

html {
overflow-y: scroll;
}

总是显示滚动条，体验不好

方式二

html {
overflow-y: overlay;
}

兼容性一般

方式三

html {
margin-right: calc(100% - 100vw);
}

方式四

html {
padding-left: calc(100vw - 100%);
}

方式五

scrollbar-gutter: stable;

方式六

解决方案

html {
overflow-y: scroll;
}

:root {
overflow-y: auto;
overflow-x: hidden;
}

:root body {
position: absolute;
}

body {
width: 100vw;
overflow: hidden;
}

参考
​​​小tip:CSS vw让overflow:auto页面滚动条出现时不跳动​​​​还有完没完，怎么又来了个 scrollbar-gutter？​​​​Prevent scroll-bar from adding-up to the Width of page on Chrome​​