scrollbar-width

Avatar of Andy Adams
Andy Adams

DigitalOcean 为您的旅程的每个阶段提供云产品。 立即开始使用 $200 免费信用额度!

CSS 中的 scrollbar-width 属性控制滚动条的宽度或“厚度”。 scrollbar-widthCSS 工作组的滚动条模块级别 1 草案 的一部分,该草案仍在进行中。 在撰写本文时,普遍认为 scrollbar-width 可能会包含在 CSS 的未来版本中,但目前正在争论是否允许使用可变的 <length> 参数,或者选项是否仅限于预设值(稍后将详细介绍)。

调整滚动条的宽度在空间有限的页面或用户界面中尤为重要,因为在滚动条上修剪几个像素(或完全删除它)可以为内容提供足够的呼吸空间,而不会影响滚动功能。

例如,想象一个文本编辑界面,其中 <textarea> 需要适合一个短而窄的容器。 在这种情况下,滚动条可能会占用大量可用空间

<textarea> with scrollbar-width: auto;

使用 scrollbar-width,我们可以将宽度设置为 thin 以节省一些空间

.scrollable-element {
  scrollbar-width: thin;
}
textarea with thin scrollbar
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,其中包含更多详细信息。 数字表示浏览器从该版本开始支持该功能。

桌面

ChromeFirefoxIEEdgeSafari
1216411121TP*

移动/平板电脑

Android ChromeAndroid FirefoxAndroidiOS Safari
127127127*13.4-13.7*

相关

资源