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

解决方式如下

方式一

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

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

方式二

html {
  overflow-y: overlay;
}
1
2
3

兼容性一般

方式三

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

方式四

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

方式五

scrollbar-gutter: stable;
1

方式六

解决方案，来自css大佬张鑫旭 的分享

html {
  overflow-y: scroll;
}

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

:root body {
  position: absolute;
}

body {
  width: 100vw;
  overflow: hidden;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

2023-04-04补充：overflow: hidden;会导致超出边界的下拉列表不显示

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