解决方式如下
方式一
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; }
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