用于稳定滚动条槽的一点点CSS

2025/10/18

我将我的操作系统配置为使用可见滚动条，这是macOS系统设置中显著提升的一个功能，高到似乎暗示某种程度的常见使用（尽管它不是默认设置）。

我不一定更喜欢这个功能启用的行为，但我在浏览网页时将其用作隐式的质量衡量标准。

我通常看到以下问题：

人们可以解决这个问题的最简单方法是在CSS重置中添加html { overflow-y: scroll; }，这可能是非常容易减少那些内容布局移动问题的好方法！但这个小片段会给每个页面添加滚动条。

要仅在需要时显示滚动条（同时为稍后添加的滚动条保留空间），请使用scrollbar-gutter CSS属性。scrollbar-gutter是Baseline 2024新可用，所以确保你用@supports守卫来增强它。

html {
	overflow-y: scroll;
}
@supports (scrollbar-gutter: stable) {
	html {
		overflow-y: auto;
		scrollbar-gutter: stable;
	}
}

这看起来很适合你的重置样式表。