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

解决方式如下

方式一

html {
    
    
  overflow-y: scroll;
}

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

方式二

html {
    
    
  overflow-y: overlay;
}

兼容性一般

方式三

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

方式四

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

方式五

scrollbar-gutter: stable;

方式六

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

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