scrollbar-width
Baseline
2024
Newly available
Since December 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
scrollbar-width プロパティは、要素のスクロールバーが表示される時の最大の太さを設定することができます。
scrollbar-width の目的は、ページまたは要素上でスクロールバーが占める空間を最適化することです。スクロールバーの見栄えとは無関係です。 scrollbar-width の定義済みキーワード値は、通常のスクロールバーをレンダリングすべきか、小さいスクロールバーをレンダリングすべきかをユーザーエージェントに示します。スクロールバーを非表示にするとアクセシビリティ に悪影響を与えるため、 none の使用は避けてください。
メモ:
プログラムによってのみスクロール可能であり、ユーザーの直接の操作ではスクロールできない要素には、 scrollbar-width: none ではなく、値 hidden を指定した overflow プロパティを使用してください。
構文
/* キーワード値 */
scrollbar-width: auto;
scrollbar-width: thin;
scrollbar-width: none;
/* グローバル値 */
scrollbar-width: inherit;
scrollbar-width: initial;
scrollbar-width: revert;
scrollbar-width: revert-layer;
scrollbar-width: unset;
値
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
.scroller {
width: 300px;
height: 100px;
overflow-y: scroll;
scrollbar-width: thin;
}
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>
結果
仕様書
| Specification |
|---|
| CSS Scrollbars Styling Module Level 1 # scrollbar-width |
ブラウザーの互換性
Loading…