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 |
瀏覽器相容性
載入中…