scrollbar-width

構文

/* キーワード値 */
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 を thin または none に設定すると、作者が別なスクロールの仕組みを提供していない限り、スクロールすることが困難または不可能になります。そのようなコンテンツはスワイプのジェスチャーやマウスホイールでスクロールできるものの、端末によっては代替スクロール手段がないことがあります。

WCAG 基準 2.1.1 (キーボード) は、長らく基本的なキーボードのアクセシビリティを勧告してきており、これはコンテンツ領域のスクロールも含みます。また、 WCAG 2.1 で導入された基準 2.5.5 (対象の寸法) では、タッチ対象の幅と高さを 44px 以上にすることを推奨しています (ただし、この問題は高解像度の画面ではさらに複雑になるため、十分なテストが必要です)。

• MDN WCAG の理解、ガイドライン 2.1 の説明
• MDN WCAG の理解、ガイドライン 2.5 の説明
• Understanding Success Criterion 2.1.1 | W3C Understanding WCAG 2.1
• Understanding Success Criterion 2.5.5 | W3C Understanding WCAG 2.1

公式定義

形式文法

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>

結果

仕様書

ブラウザーの互換性

関連情報

• CSS オーバーフローモジュール
• CSS スクロールバースタイル設定モジュール
• overflow
• scrollbar-gutter
• scrollbar-color