ウェブ

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

スクロールバーをカスタマイズ

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

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

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

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

▪デフォルト⇩

デフォルト
デフォルト

▪カスタマイズ⇩

scrollbar
scrollbar

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

スクロールバーをカスタムする場合、擬似要素::-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の疑似要素

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

パーツを構成する擬似要素
パーツを構成する擬似要素

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

疑似要素内容
::-webkit-scrollbarスクロールバー全体をカスタム
::-webkit-scrollbar-buttonスクロールバー矢印ボタンをカスタム
::-webkit-scrollbar-thumbスクロールバーつまみをカスタム
::-webkit-scrollbar-trackスクロールバー背景をカスタム
::-webkit-scrollbar-track-pieceスクロールバー軌道をカスタム
::-webkit-scrollbar-corner水平と垂直のスクロールバー交差部分
::-webkit-resizerサイズ変更用つまみ
::-webkit-scrollbar

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

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