CSS滚动条抖动的解决方案 兼容各类UI框架

在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)

欢迎来到Yari的网站:yar2001 » CSS滚动条抖动的解决方案 兼容各类UI框架

评论

2+9=