スクロールバーの色
PCで表示されるブラウザ内のスクロールバーが、ページ配色に合わずに目立っている気がしていました。
そしてページ内ブロックに表示されるスクロールバーをカスタマイズしたくなりました。
そこで、このページに表示されるスクロールバーの色をページ配色に合わせて替てみました。
ブラウザ依存なので
Mozilla系のスクロールバーはカスタマイズ性が低い。しかし色を替えるという目的は叶う。
Chromium系は独自な疑似要素セレクターにて細かいカスタマイズが出来ますが、やりすぎるとMozilla系と別物になってしまいます。
なぜ、この様にブラウザ依存が続くのかは知りませんが、そこは掘り下げないでおきます。
カスタマイズ方針
『スクロールバーをページ配色にあった色にする。』
そこでMozilla系で色を替えて、細かい設定ができるChromium系は、そのMozilla流のデザインに合わせるという対処を行う事にしました。
カスタマイズCSSのソースコード
対処したCSSは下記の通りです。
/* --------------------------------------------------------------
スクロールバーのカスタマイズ ※MozillaとChromiumで対応が違う
*/
/* スクロールバーの配色指定 */
:root {
--scrollbar-track-color: rgb(248,250,255);
--scrollbar-thumb-color: rgb(220,225,255);
--scrollbar-hover-color: rgb(157,162,209);
--scrollbar-active-color: rgb(90,93,128);
}
/* Mozilla系 */
.scroll_bar, /* Mozillaはページ全体に指定する事ができないので、要素毎に、このクラスを指定する */
html { /* MozillaはBodyに指定しても効かないのでhtmlに指定する */
scrollbar-width: auto;
scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
}
/* Chromium系 ページ全体に一括指定できる */
::-webkit-scrollbar {
width: auto;
}
::-webkit-scrollbar-button {
display: block;
background-color: var(--scrollbar-track-color);
background-repeat: no-repeat;
background-size: 55% 55%;
background-position: center;
}
::-webkit-scrollbar-button:vertical:start:increment {
display: none;
}
::-webkit-scrollbar-button:vertical:start:decrement {
background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIiIGhlaWdodD0iMTMiIHZpZXdCb3g9IjAgMCAyMiAxMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIwIDExTDExIDJMMiAxMSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cgo=');
}
::-webkit-scrollbar-button:vertical:end:increment {
background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIiIGhlaWdodD0iMTMiIHZpZXdCb3g9IjAgMCAyMiAxMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIgMkwxMSAxMUwyMCAyIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4KCg==');
}
::-webkit-scrollbar-button:vertical:end:decrement {
display: none;
}
::-webkit-scrollbar-button:horizontal:start:increment {
display: none;
}
::-webkit-scrollbar-button:horizontal:start:decrement {
background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTMiIGhlaWdodD0iMjIiIHZpZXdCb3g9IjAgMCAxMyAyMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxwYXRoIGQ9Ik0xMSAyTDIgMTFMMTEgMjAiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS13aWR0aD0iMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+DQo8L3N2Zz4=');
}
::-webkit-scrollbar-button:horizontal:end:increment {
background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTMiIGhlaWdodD0iMjIiIHZpZXdCb3g9IjAgMCAxMyAyMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxwYXRoIGQ9Ik0yIDJMMTEgMTFMMiAyMCIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4NCjwvc3ZnPg==');
}
::-webkit-scrollbar-button:horizontal:end:decrement {
display: none;
}
::-webkit-scrollbar-track {
background-color: var(--scrollbar-track-color);
}
::-webkit-scrollbar-thumb {
background-color: var(--scrollbar-thumb-color);
}
::-webkit-scrollbar-thumb:hover {
background-color: var(--scrollbar-hover-color);
}
::-webkit-scrollbar-thumb:active {
background-color: var(--scrollbar-active-color);
}
Tips:操作性は大切に
スクロールバーを目立ちすぎる配色にすると、閲覧者にとっては閲覧しづらいページになってしまいます。
スクロールバーの幅はデバイスによって適切な設定があり、それはauto指定に留めることをお勧めします。
なお、ここで紹介するスクロールバー設定が有効なのはパソコンのみです。スマホなどは強制的にデバイスにあったものになります。