Webサイトのデザインによっては、ブラウザ標準のスクロールバーが浮いて見えることがあります。スクロールバーにもCSSを適用できるので、サイトに合わせて好みのデザインに変えてみましょう。この記事では、CSSでスクロールバーをデザインする方法を、コピペで使えるサンプルコード付きで網羅的に紹介します。

スクロールバーをデザインする基本の書き方

スクロールバーをデザインするには、CSSセレクタに::-webkit-scrollbar系の擬似要素を指定します。これでスクロールバーの可動部分（ハンドル）と背景（トラック）のデザインを変更できます。

.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;
}

主な擬似要素は次の3つです。

• ::-webkit-scrollbar … スクロールバー全体（幅・高さ）
• ::-webkit-scrollbar-thumb … ハンドル（動く部分）
• ::-webkit-scrollbar-track … トラック（背景）

ブラウザごとの対応状況

::-webkit-scrollbarはWebKit系ブラウザ（Chrome・Safari）やEdgeで有効です。一方、FirefoxとiOSには制約があるため、ブラウザごとの挙動を把握しておく必要があります。

Firefoxの場合

Firefoxは::-webkit-scrollbarに非対応で、代わりに専用プロパティでデザインを変更します。

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

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

ただし細かな調整はできず、OSの設定次第では無視されることもあります。Firefoxに対しては無理に合わせず、何もしない（標準のまま）のがおすすめです。

iOSの場合

iOSではスクロールバーは常時表示されず、スクロール時のみ表示される仕様です。以前は-webkit-scrollbarで常時表示できましたが、iOS13以降はできなくなっています。どうしても常時表示したい場合は、JavaScriptライブラリのSimpleBarを使うと解決できます。

スクロールバーのサイズと表示を調整する

スクロールバーの幅を変える

幅は::-webkit-scrollbarにwidth・heightを指定して変更します。縦スクロールバーの幅はwidth、横スクロールバーの幅はheightです。

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

縦・横を個別に表示する

縦・横を個別に制御するには、ボックス要素にoverflow-y／overflow-xを指定します。scrollで常時表示、overflow: scroll単体なら両方を常時表示します。

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

デザインを適用する範囲を決める

どの範囲にスクロールバーのデザインを効かせるかは、セレクタの指定で変わります。

• 特定のブロック要素だけ → そのセレクタに指定
• 全要素 → 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を指定します。マウスオーバー時だけ表示するには:hoverと組み合わせます。

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

/* ホバー時だけ表示 */
.scrollbar::-webkit-scrollbar {
  display: none;
}
.scrollbar:hover::-webkit-scrollbar {
  display: block;
}

おしゃれなスクロールバーにするデザイン例

角丸をつける

ハンドルやトラックに角丸をつけるにはborder-radiusを指定します。

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

透明にする

透明にするにはbackgroundにrgbaで透明度を指定します。透明度は0（完全な透明）〜1（不透明）の数値です。

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

グラデーションをつける

グラデーションにはlinear-gradientを使います。

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

画像を使う

スクロールバーに画像を使うにはbackground-imageを指定します。

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

スクロールバーのCSSが効かないときは

スクロールバーのデザインが反映されない場合は、次の点を確認してください。

• 内容がボックスの範囲内に収まっていないか（あふれていないとスクロールバーが出ない）
• セレクタ・プロパティ・値の記述ミスがないか
• 別のCSSで上書きされていないか

まとめ

デザインにこだわるサイトでは、スクロールバーをCSSで整えると全体の統一感が高まります。ただし、ブラウザやOSによって見え方が異なるため、すべての環境で完璧に揃えようとせず、主要ターゲット（Chrome・Safari）に絞って適用するのが現実的でおすすめです。