scrollbar-width
scrollbar-width 属性允许作者设置元素滚动条（如果显示）的所需厚度。
scrollbar-width 的目的是优化滚动条在页面或元素上占据的空间；其目的与滚动条的美观无关。scrollbar-width 的预定义关键字值指示用户代理是应该渲染正常滚动条还是更小的滚动条。避免使用 none，因为隐藏滚动条会对可访问性产生负面影响。
注意： 对于只能通过程序方式滚动而不能通过直接用户交互滚动的元素，请使用值为 hidden 的 overflow 属性，而不是 scrollbar-width: none。
语法
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 值应用于视口。
无障碍
请谨慎使用此属性 — 如果作者未提供替代的滚动机制，将 scrollbar-width 设置为 thin 或 none 可能会使内容难以或无法滚动。虽然滑动手势或鼠标滚轮可以使此类内容滚动，但某些设备没有滚动替代方案。
WCAG 2.1.1 准则（键盘）长期以来一直用于提供基本的键盘可访问性建议，这应该包括内容区域的滚动。WCAG 2.1 中引入的 2.5.5 准则（目标大小）建议触摸目标的宽度和高度至少为 44px（尽管在高分辨率屏幕上问题会更加复杂；建议进行彻底测试）。
正式定义
正式语法
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 |
浏览器兼容性
加载中…