CSS滚动条抖动的解决方案

在SPA页面中，当从有滚动条的页面进入无滚动条的页面时，会发生页面元素的抖动。初步解决这个问题的方法是让滚动条始终出现。

body {
 overflow-y: scroll;
}

overflow可以放在body，也可以放在html标签中，它们的效果是相同的。

然而，一些UI库在特定情况下会向body或html中注入overflow样式（例如，显示全屏弹窗时，为了防止页面发生抖动，会向html或body中临时添加overflow:hidden）。

而由于无法确定到底是body和html哪个标签（例如，Ant Design会在body中注入这行css代码，而Headless UI则是在html），如果设置的标签不一致，将导致注入的css失效。

为了解决这个问题，可以用下面这个更好的方案，让body的最小高度为屏幕高度的101%。这样，无论Modal库向body或html哪个标签注入overflow样式，都可以生效。

body {
 min-height: 101vh;
}

像Web这样历史悠久且场景丰富的技术栈，有诸多碎片化设计。当遇到问题，特别是这种细节问题时，要避免盲目尝试和胡乱猜测，应当仔细找到问题根源，选择恰当、简洁、副作用小和可维护性高的解决方案。

补充

CSS有一个实验性样式scrollbar-gutter: stable;，专门解决这个问题，但兼容性不好，可能会和UI框架发生冲突。详细查看：scrollbar-gutter – CSS: Cascading Style Sheets | MDN (mozilla.org)