Sep.25th, 2020
スクロールバーをカスタマイズ
CSSでスクロールバーのデザインをカスタマイズ
ブラウザのウィンドウや中身がはみ出した要素に表示されるスクロールバーはデフォルトでは味気ないものであったり、最近のブラウザではスクロールする時だけに表示されるものだったりしてウェブページを閲覧しているユーザーの環境によって見た目がバラバラです。
スクロールバーをウェブページのデザインにあったものにしたい場合や、ユーザーの環境によってスクロールバーの表示非表示が異なることでレイアウトが崩れてしまうのを防ぐために使用できるのが“::-webkit-scrollbar”擬似要素です。スクロールバーをカスタマイズする方法としては、スクリプトを使用して疑似的にスクロールバーを表示する方法などもありますが、“::-webkit-scrollbar”擬似要素を使用すればCSSの設定だけでスクロールバーのデザインを変更することができます。
なお、この“::-webkit-scrollbar”はCSSで標準化されているものではなくWebKitの独自拡張機能であるため、WebKitとWebKitから分岐したBlinkをHTMLレンダリングエンジンに採用しているブラウザでしか機能しません。
しかし、これらのブラウザにはSafari、Chrome、OperaやChromium版Edgeが含まれ、主要なブラウザではFirefox以外では機能させることができます。
“::-webkit-scrollbar”擬似要素
“::-webkit-scrollbar”擬似要素
| 擬似要素 | 説明 |
|---|---|
| ::-webkit-scrollbar | スクロールバーの全体 |
| ::-webkit-scrollbar-button | スクロールバーの矢印ボタン |
| ::-webkit-scrollbar-thumb | スクロールバーのつまみ |
| ::-webkit-scrollbar-track | スクロールバーの背景 |
| ::-webkit-scrollbar-track-piece | スクロールバーの軌道 |
| ::-webkit-scrollbar-track-corner | 水平と垂直のスクロールバーの交差部分 |
| ::-webkit-resizer | サイズ変更用のつまみ |
これらの擬似要素はスクロールバーをカスタマイズしたい要素を選択するセレクタに付加します。ウェブページを表示するウィンドウ自体のスクロールバーをカスタマイズする場合は“body”要素を選択するセレクタに付加します。
スクロールバーをカスタマイズするには最低限“::-webkit-scrollbar”による設定が必要です。また、“::-webkit-resizer”以外は記述しなかった場合はその擬似要素が当てはまるパーツは表示されません。
“width”プロパティと“height”プロパティでスクロールバーの幅とボタンの大きさ、“background”プロパティで色、他にも“border”プロパティや“box-shadow”プロパティなどでデザインを変更することができます。
一部のパーツは重なって表示され、不要な時には表示されないものもあります。
シンプルなスクロールバーのサンプルコード
以下はシンプルなスクロールバーのサンプルコードです。
.scroll-box-1::-webkit-scrollbar {
width: 10px; /* 垂直方向のスクロールバーの幅 */
height: 10px; /* 水平方向のスクロールバーの幅 */
}
.scroll-box-1::-webkit-scrollbar-thumb {
background-color: rgb(150,150,150);
border-radius: 5px;
box-shadow: inset 3px 3px 3px rgba(255,255,255,0.2);
}
.scroll-box-1::-webkit-scrollbar-track {
background-color: rgb(220,220,220);
border-radius: 5px;
box-shadow: inset 3px -3px 5px rgba(0,0,0,0.2);
}
.scroll-box-1::-webkit-scrollbar-corner {
display: none;
}
併せて使用できる擬似クラス
擬似要素に以下の擬似クラスを付加するとさらに細かくスクロールバーのデザインを設定することができます。
| 擬似クラス | 説明 | 対象となるパーツ |
|---|---|---|
| :horizontal | 垂直方向のスクロールバーに適用 | すべて |
| :vertical | 水平方向のスクロールバーに適用 | すべて |
| :decrement | パーツがスクロールバーの減少方向にある場合に適用 | 'button' 'track-piece' |
| :increment | パーツがスクロールバーの増加方向にある場合に適用 | 'button' 'track-piece' |
| :start | つまみよりも前の部分に適用 | 'button' 'track-piece' |
| :end | つまみよりも後の部分に適用 | 'button' 'track-piece' |
| :double-button | 両方向のボタンが一端にあるスクロールバーのボタン、もしくはそのボタンに接している軌道に適用 | 'button' 'track-piece' |
| :single-button | 片方向のボタンが一端にあるスクロールバーのボタン、もしくはそのボタンに接している軌道に適用 | 'button' 'track-piece' |
| :no-button | スクロールバーにボタンがない場合に適用 | 'track-piece' |
| :corner-present | 水平と垂直のスクロールバーの交差部分がある場合に適用 | すべて |
| :window-inactive | スクロールバーを含むウィンドウがアクティブでない場合に適用 | すべて |
他にもCSSで標準化されている“:enabled”擬似クラス、“:disabled”擬似クラス、“:hover”擬似クラス、“:active”擬似クラスが使用できます。
