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;
}