スクロールバー(scrollbar)のデザインを変更する方法【CSS】

CSSのみでスクロールバーをカスタマイズする方法について解説します。ブラウザで一番右側に表示されているのがスクロールバー。

Google ChromeやSafariなどのWebkitブラウザで利用できる::-webkit-scrollbar擬似要素で変更を行います。

※WebkitとはHTMLをレンダリングするブラウザ、Google Chrome（グーグルクローム）・Microsoft Edge（マイクロソフトエッジ）・Safari（サファリ）などのことです。

画面上に入りきらなかった場合も表示され、設定しない場合はデフォルトのスクロールバーが表示される仕様になっています。

▪デフォルト⇩

▪カスタマイズ⇩

スクロールバーの色と幅を変更

スクロールバーをカスタムする場合、擬似要素::-webkit-scrollbarを使用します。

シンプルに色と幅を変更したい場合は下記コードを記述することで反映されます。

/* スクロールバー全体 */
::-webkit-scrollbar {
    width: 10px;
}
/* スクロールバー背景 */
::-webkit-scrollbar-track {
    background: #fff;
    box-shadow: inset 0 0 2px #777;
}
/* スクロールバーつまみ */
::-webkit-scrollbar-thumb {
    background: #3b5d82;
}

▪Codepen参考例⇩

※反映がわかりやすいように、垂直方向と水平方向のスクロールバーの幅を20pxに設定しています。

See the Pen スクロールバー色・幅の変更 by pull-design (@design90806871) on CodePen.

::-webkit-scrollbarの疑似要素

▪スクロールバーのパーツ⇩

擬似要素はスクロールバーをカスタマイズしたい要素を選択します。

スクロールバーをCSSのみでカスタマイズする方法を解説しました。

カスタマイズをやりすぎると、スクロールバーが目立ってしまう為、サイトに合わせてシンプルになるよう指定したほうがいいですね。