scrollbar-width
scrollbar-width プロパティは、要素のスクロールバーが表示される時の最大の太さを設定することができます。
scrollbar-width の目的は、ページまたは要素上でスクロールバーが占める空間を最適化することです。スクロールバーの見栄えとは無関係です。 scrollbar-width の定義済みキーワード値は、通常のスクロールバーをレンダリングすべきか、小さいスクロールバーをレンダリングすべきかをユーザーエージェントに示します。スクロールバーを非表示にするとアクセシビリティ に悪影響を与えるため、 none の使用は避けてください。
メモ: プログラムによってのみスクロール可能であり、ユーザーの直接の操作ではスクロールできない要素には、 scrollbar-width: none ではなく、値 hidden を指定した overflow プロパティを使用してください。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 121 | 121 | 64 | 18.2 | 121 | 18.2 | |
auto | 121 | 121 | 64 | 18.2 | 121 | 18.2 |
none | 121 | 121 | 64 | 18.2 | 121 | 18.2 |
thin | 121 | 121 | 64 | 18.2 | 121 | 18.2 |
基本構文
CSS
.sidebar {
overflow-y: auto;
scrollbar-width: thin;
}
/* Hide the scrollbar (scrolling is still possible) */
.clean-scroll {
overflow-y: auto;
scrollbar-width: none;
}ライブデモ
実務での使いどころ
-
UIの洗練
サイドバーやチャット欄のスクロールバーを細くして、デザインの邪魔にならないようにする。
注意点
- scrollbar-width: none はスクロールバーが見えなくなるだけで、スクロール操作自体は可能。ただしユーザーがスクロール可能であることに気づけない可能性がある。
- Safari 18.2未満では無効。古いSafariユーザーにはデフォルトのスクロールバーが表示される。
アクセシビリティ
- scrollbar-width: none を使う場合、スクロール可能であることを視覚的に示す別の手段を提供する。