DigitalOcean 为您的旅程的每个阶段提供云产品。 立即开始使用 $200 免费信用额度!
CSS 中的 scrollbar-width
属性控制滚动条的宽度或“厚度”。 scrollbar-width
是 CSS 工作组的滚动条模块级别 1 草案 的一部分,该草案仍在进行中。 在撰写本文时,普遍认为 scrollbar-width
可能会包含在 CSS 的未来版本中,但目前正在争论是否允许使用可变的 <length>
参数,或者选项是否仅限于预设值(稍后将详细介绍)。
调整滚动条的宽度在空间有限的页面或用户界面中尤为重要,因为在滚动条上修剪几个像素(或完全删除它)可以为内容提供足够的呼吸空间,而不会影响滚动功能。
例如,想象一个文本编辑界面,其中 <textarea>
需要适合一个短而窄的容器。 在这种情况下,滚动条可能会占用大量可用空间

<textarea>
with scrollbar-width: auto;
使用 scrollbar-width
,我们可以将宽度设置为 thin
以节省一些空间
.scrollable-element {
scrollbar-width: thin;
}

textarea
with scrollbar-width: thin;
或者,我们可以将宽度设置为 none
以完全删除它,从而节省更多空间(假设我们对滚动条消失没有意见)
.scrollable-element {
scrollbar-width: none;
}

textarea
with scrollbar-width: none;
– 您仍然可以滚动!语法
scrollbar-width: auto | thin | none | <length>;
值
scrollbar-width
接受以下值
auto
是默认值,将呈现用户代理的标准滚动条。thin
将告诉用户代理使用更细的滚动条(如果适用)。none
将完全隐藏滚动条,而不影响元素的可滚动性。<length>
正在讨论中,但(如果添加)将是滚动条的最大宽度。
示例
浏览器支持
这用于滚动条的整体可定制性。 要获得跨浏览器样式化滚动条的最佳选择,请查看这里。
此浏览器支持数据来自 Caniuse,其中包含更多详细信息。 数字表示浏览器从该版本开始支持该功能。
桌面
Chrome | Firefox | IE | Edge | Safari |
---|---|---|---|---|
121 | 64 | 11 | 121 | TP* |
移动/平板电脑
Android Chrome | Android Firefox | Android | iOS Safari |
---|---|---|---|
127 | 127 | 127* | 13.4-13.7* |