CSSでスクロールバーの見た目を変えるには
標準プロパティの scrollbar-width と scrollbar-color で、スクロールバーの太さと色を変える方法を示す。
ベンダー拡張の ::-webkit-scrollbar と併用できない点まで含めて扱う。
実行確認済みは、ブラウザで実際に描画して見た目を確認したものである。
公開:
<div class="scroll-box">
<p>行 1</p>
<p>行 2</p>
<p>行 3</p>
<p>行 4</p>
<p>行 5</p>
<p>行 6</p>
<p>行 7</p>
<p>行 8</p>
</div>.scroll-box {
height: 150px;
overflow-y: auto;
border: 1px solid #e2e8f0;
border-radius: 8px;
background: #fff;
/* 細さは auto / thin / none の 3 値から選ぶ */
scrollbar-width: thin;
/* 前がつまみ、後ろが軌道の色 */
scrollbar-color: #0f766e #e2e8f0;
}
.scroll-box p {
margin: 0;
padding: 10px 14px;
border-bottom: 1px solid #f1f5f9;
}scrollbar-width と scrollbar-color は CSS の標準プロパティで、スクロールする要素そのものに指定する。
色は「つまみ 軌道」の順に 2 つ書く決まりで、1 つしか書かないと無効になるため、軌道の色も必ず添える。
つまずき
古い記事にならって ::-webkit-scrollbar と標準プロパティを同時に書くと、Chromium では ::-webkit-scrollbar 側が丸ごと無視される。
Chrome 121 で標準プロパティが実装された際、scrollbar-width または scrollbar-color が初期値以外なら旧来の -webkit- 系疑似要素を効かせない、と CSS ワーキンググループが決めたためである。
つまみを角丸にするといった細かい造形を ::-webkit-scrollbar でやりたい場合は、同じ要素に標準プロパティを書かないこと。
両対応させるなら @supports not selector(::-webkit-scrollbar) で囲み、::-webkit-scrollbar を持たないブラウザにだけ標準プロパティを当てる。
太さを変えると幅が動く
scrollbar-width: thin や none はスクロールバーが占める幅そのものを変えるため、切り替えたときに中身の折り返し位置がずれることがある。
とくに none は幅が 0 になり、スクロールできること自体が見た目から分からなくなるので、ホバーで気付ける代替表現を用意できないうちは避けるのが無難である。
スクロールバーの有無で横幅が揺れるのが問題なら、scrollbar-gutter: stable を併せて指定し、出ていないときも領域を確保しておく。