ボックス
scrollbar-width
scrollbar-width は、スクロールバーを細めにしたり、隠したりします。太さはキーワードで選び、何 px かは書けません。
構文
auto | thin | noneプレビュー
Open https://example.com/a/very/long/path to see more. The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。きのうは雨でしたが、けさはよく晴れています。
プリセット
右下の角をドラッグするとサイズを変えられます
コード
.box {
overflow: auto;
scrollbar-width: thin;
}コントロール
scrollbar-widththin
Open https://example.com/a/very/long/path to see more. The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。きのうは雨でしたが、けさはよく晴れています。
解説
値の意味
auto：ブラウザと OS が決めるふつうの太さです。初期値です。thin：細めにします。どれだけ細くなるかはブラウザと OS によります。none：スクロールバーを出しません。スクロールそのものはできて、ホイールやタッチ、キーボードで動かせます。
スクロールバーが出るとき
スクロールバーは、overflow が auto や scroll の箱で、中身がはみ出したときに出ます。このページのプレビューも overflow: auto にして、縦にも横にもはみ出す文章を入れています。
気をつけること
- 継承しません。スクロールする箱そのもの（ページ全体なら
html）に書きます。 - macOS のように、スクロールしていないときはスクロールバーを隠す設定では、違いが見えにくくなります。
noneにすると、スクロールできることに気づきにくくなります。横に流すカルーセルなど、ほかの手がかりがあるところで使います。- Chrome・Edge は 121、Safari は 18.2 から対応しています。それまでは
::-webkit-scrollbar疑似要素で太さを変えていました。Chrome・Edge では、scrollbar-width か scrollbar-color にauto以外を書くと::-webkit-scrollbarのスタイルは使われなくなります。