scrollbar-width

可用性受限

此功能不是基线功能，因为它在一些最广泛使用的浏览器中无法正常工作。

scrollbar-width 属性允许作者设置元素滚动条显示时的最大厚度。

语法

css
/* Keyword values */
scrollbar-width: auto;
scrollbar-width: thin;
scrollbar-width: none;

/* Global values */
scrollbar-width: inherit;
scrollbar-width: initial;
scrollbar-width: revert;
scrollbar-width: revert-layer;
scrollbar-width: unset;

值

<scrollbar-width>

将滚动条的宽度定义为一个关键字。它必须是以下值之一

auto 平台的默认滚动条宽度。
thin 在提供此选项的平台上使用细滚动条宽度变体，或者使用比默认平台滚动条宽度更细的滚动条。
none 不显示滚动条，但元素仍然可以滚动。

注意：用户代理必须将根元素上设置的任何 scrollbar-width 值应用于视口。

无障碍访问

谨慎使用此属性 - 将 scrollbar-width 设置为 thin 或 none 会导致内容难以或无法滚动，除非作者提供替代的滚动机制。虽然滑动手势或鼠标滚轮可以在此类内容上启用滚动，但某些设备没有滚动替代方案。

WCAG 准则 2.1.1（键盘）已存在很长时间，用于建议基本的键盘可访问性，这应包括内容区域的滚动。WCAG 2.1 中引入的准则 2.5.5（目标大小）建议触摸目标的宽度和高度至少应为 44px（尽管在高分辨率屏幕上问题会加剧；建议进行彻底的测试）。

正式定义

初始值auto
应用于滚动框
继承否
计算值如指定
动画类型按计算值类型

正式语法

scrollbar-width = 
  auto  |
  thin  |
  none

示例

调整溢出滚动条的大小

CSS

css
.scroller {
  width: 300px;
  height: 100px;
  overflow-y: scroll;
  scrollbar-width: thin;
}

HTML

html
<div class="scroller">
  Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
  daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens
  corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts
  fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber
  earthnut pea peanut soko zucchini.
</div>

结果

规范

规范
CSS 滚动条样式模块级别 1
# scrollbar-width

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅