CSSでスクロールバーをデザインする方法とサンプルコード

Webサイトのデザイン次第では、ブラウザ標準のスクロールバーが合わない場合があります。

スクロールバーにもCSSが適用できるため、好みのデザインに変えてみましょう。

この記事では、CSSを使ってスクロールバーをデザインする方法について紹介します。

【CSS】スクロールバーをデザインする方法

スクロールバーをデザインするには、CSSセレクターに次のような擬似要素を指定します。

これによって、スクロールバーの可動部分と背景のデザインが変更可能です。

他にもスクロールバーを調整する擬似要素があるため、こだわりたい人は試してみましょう。

上記の擬似要素を使用する方法は、webkit系ブラウザ（Chrome・Safari）やEdgeなどに有効です。

コード例：

.scrollbar {
	overflow: scroll;
	width: 400px;
	height: 300px;
}
.scrollbar::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}
.scrollbar::-webkit-scrollbar-thumb {
	background: #00608d;
}
.scrollbar::-webkit-scrollbar-track {
	background: #bbdbf3;
}

DEMO：

【CSS】制約のあるブラウザ・環境

::-webkit-scrollbar は、Firefoxでは反映されません。またiOSにおいても制約があります。

Firefoxの場合

Firefoxでは ::-webkit-scrollbar は非対応である代わりに、スクロールバーのデザインをプロパティで変更できます。

• scrollbar-width
• scrollbar-color
• scrollbar-gutter

しかし細かな調整ができないことや、OSの設定など次第では無視されることもあるため、Firefox に対しては何もしないことがおすすめです。

コード例：

.scrollbar {
	scrollbar-width: thin;
	scrollbar-color: #00608d #aaa;
}

DEMO：

iOSの制約

iOSではスクロールバーは常時表示されず、スクロールする際に表示される仕様です。

以前は -webkit-scrollbar を指定することで常時表示できましたが、iOS13以降のバージョンではできなくなっています。

iOSでも常時表示させたい場合はJavaScriptライブラリ SimpleBar を使用することで解決できます。

詳しくは以下のページを参照してください。

【CSS】スクロールバーデザインの事例

CSSでスクロールバーのデザインを調整する代表的な事例を紹介します。

スクロールバーの幅を変更する

スクロールバーの幅は ::-webkit-scrollbar に width や height プロパティを指定することで変更できます。

• 縦スクロールバーの幅 → width
• 横スクロールバーの幅 → height

コード例：

.scrollbar::-webkit-scrollbar {
	width: 7px;
	height: 7px;
}

DEMO：

縦スクロール・横スクロールを個別に表示する

縦・横を個別に表示する場合はボックスの要素に overflow-y｜overflow-x プロパティを指定します。

• 縦スクロールを常に表示する → overflow-y: scroll
• 横スクロールを常に表示する → overflow-x: scroll

単に overflow: scroll とした場合は、両方を常に表示します。

.scrollbar {
	overflow-x: hidden;
	overflow-y: scroll;
}

DEMO：

特定の要素・全要素・ブラウザに適用する

スクロールバーデザインを適用する範囲を決める方法です。

• 特定のブロック要素に適用　→　特定のセレクタに指定する
• 全要素に適用　→　div要素に指定する
• ブラウザ（ページ全体）に適用　→　擬似要素のみ指定する

コード例（特定のブロック・ここでは #scrollbox）：

#scrollbox::-webkit-scrollbar {
	width: 7px;
}

コード例（全div要素）：

div::-webkit-scrollbar {
	width: 7px;
}

コード例（ブラウザ・ページ全体）：

::-webkit-scrollbar {
	width: 7px;
}

非表示にする

スクロールバーを非表示にするときは display: none を指定します。

コード例：

.scrollbar::-webkit-scrollbar {
	display: none;
}

条件によって表示させる

要素の幅・高さを超える内容がある場合のみ表示させるには、要素のセレクタに overflow: auto を指定します。

コード例：

.scrollbar {
	width: 400px;
	height: 300px;
	overflow: auto;
}

マウスオーバーしたときだけ表示させるには、擬似クラス :hover を使用して次のように指定します。

コード例：

.scrollbar::-webkit-scrollbar {
	display: none;
}
.scrollbar:hover::-webkit-scrollbar {
	display: block;
}

DEMO：

【CSS】おしゃれなスクロールバーデザインにする方法

さらにデザインに特徴を持たせておしゃれなスクロールバーにするCSSを紹介します。

角丸をつける

スクロールバーのハンドル（動く部分）やトラック（背景）に角丸をつける場合は border-radius プロパティを指定します。

それぞれに指定する場合は次のようにします。

コード例：

.scrollbar::-webkit-scrollbar-thumb {
	border-radius: 5px;
}
.scrollbar::-webkit-scrollbar-track {
	border-radius: 5px;
}

DEMO：

透明にする

スクロールバーを透明にするには background プロパティに rgba で透明度を指定します。

例えば、トラックを透明（50%）にする場合は次のように記述します。

コード例：

.scrollbar::-webkit-scrollbar-track {
	background: rgba(187, 219, 243, 0.5);
}

DEMO：

透明度は0から1までの数値で、0が完全な透明、1が不透明です。

グラデーションを加える

スクロールバーにグラデーションを加えるには background プロパティに linear-gradient を指定します。

使用時は、以下のように記載します。

コード例：

.scrollbar::-webkit-scrollbar-track {
	background: linear-gradient(#bbdbf3, #00a1e9);
}

DEMO：

画像を用いる

スクロールバーに画像を用いる場合は background-image で画像を指定します。

ハンドルに画像を表示させるには次のようにします。

コード例：

.scrollbar::-webkit-scrollbar-thumb {
	background-image: url("./scroll-button.png");
}

DEMO：

【CSS】スクロールバーのCSSが効かない場合の対処

スクロールバーのCSSが効かない場合は、次の点を確認してください。

• 内容がボックスの範囲内に収まっている
• セレクタ・プロパティ・値の記述ミス
• 別のCSSで上書きされている

文法チェックやCSS検証ツールを使用すれば効率的でしょう。

まとめ

デザインにこだわりがあるサイトでは、スクロールバーをCSSでデザインすると効果的です。

ただしブラウザやOSによって見え方が異なるため、すべてを満足なできにしようとせず、ターゲットを絞ってCSSを適用するのがおすすめです。

IPPEI FUKUTA

名古屋の Web 制作会社で 9 年半働いた後フリーランスに。中小企業のWEBサイト制作実績 120 サイト以上。ディレクション、デザイン、コーディング、WordPress 構築まで手掛けます。Web制作に関わる情報やワーケーション日記などを執筆しています。