CSS Reference

scrollbar-width

スクロールバーが表示される場合の最大幅を指定する

scrollbar-width プロパティは、スクロールバーが表示される場合の最大幅を指定します。

特に、表示領域が狭いスクロールコンテナに対して、通常のスクロールバーよりも細いスクロールバーを表示した方が望ましい場合などに有用です。スクロールバーはユーザーにとって

スクロールバーはページ操作に必要なUIであり、ユーザビリティを考慮するとスクロールバーには一貫したデザインを求められます。また、ユーザーはOSやブラウザの設定を通じてスクロールバーの見た目や挙動をカスタマイズできるため、前述した、通常サイズのスクロールバーだと邪魔になるシチュエーションなど、特定のユーザー体験（UX）を向上させるため以外でこのプロパティを乱用することは避けるべきです。

指定できる値は下記の通りです。

auto 既定のスクロールバーの太さを使用します。この太さは、OSやブラウザによって異なるかもしれません。またユーザーの設定によって幅が変更されることがあります。（既定値）
thin auto よりも細いスクロールバーを使用します。
細いスクロールバーを使用することでユーザーがスクロール操作をしにくくなったり、できなくなる場合もあります。指定する場合は注意しましょう。
none スクロールバーを表示しません。ただし、スクロールバーが表示されなくても、マウスのスクロールホイールやキーボードなどの他の手段でスクロールは可能です。
なお、スクロールバーが表示されないと、マウスホイールのないマウスのみのユーザーがスクロールできなくなる可能性があるため、視覚的なヒントを提供するなどの対応が必要です。また、スクロールバーを完全に非表示にしたい場合でも、スクロール可能なことがわかるように、ユーザーに対して視覚的なヒントを提供することが推奨されます。

scrollbar-widthの仕様

初期値
  • auto
対象となる要素
  • スクロールコンテナ
継承
  • なし

scrollbar-widthのサンプルソース

.container {
  overflow: auto;
  scrollbar-width: thin;
}

主要ブラウザの対応

IE11 ×
Edge（EdgeHTML） ×
Edge（Chromium） ○
Chrome ○
Firefox ○
Safari ×
iOS Safari ×
Android Chrome ○

関連するプロパティ

仕様書

用途から CSS プロパティやセレクタを探す

用途から CSS プロパティやセレクタを逆引きできます。

対応ブラウザから CSS プロパティやセレクタを探す

対応ブラウザから CSS プロパティやセレクタを逆引きできます。

Edge（EdgeHTML）
Edge（Chromium）
Firefox
Chrome
Safari
iOS Safari
Android Chrome