CSSスクロールバーのカスタマイズ｜色・幅・非表示のコピペ集

CSSでスクロールバーの見た目を変える方法は2系統あります。標準プロパティの scrollbar-color（色）・scrollbar-width（幅）と、Chrome や Safari で長く使われてきた ::-webkit-scrollbar 系の擬似要素です。2026年10月時点では、主要ブラウザの最新版すべてが標準プロパティに対応しているため、まず標準プロパティで書き、細かい装飾が必要な場合だけ -webkit- を足す、という順番がおすすめです。

この記事では、Chromium 141 で実際にスクロールバーの幅と色を計測し、標準プロパティと -webkit- の指定を両方書いたときにどちらが効くかを確かめました。その結果をもとに、@supports で書き分けるコード、非表示・細くする・ホバー時だけ表示するサンプル、scrollbar-gutter でレイアウトのガタつきを防ぐ方法まで、コピーして使える形でまとめています。

CSSスクロールバーの早見表

やりたいことから選べる表です。

標準プロパティと -webkit- 擬似要素の一覧です。

ブラウザの対応表（2026年10月時点）

MDN の scrollbar-color・scrollbar-width・scrollbar-gutter の各ページと、MDN が公開している対応データ（npm の @mdn/browser-compat-data 8.1.4）で確認した対応バージョンです。

ブラウザごとに「どちらが効くか」をまとめると次のようになります。

MDN の scrollbar-color のページには、「scrollbar-color の計算値が auto 以外の要素では、ブラウザは ::-webkit-scrollbar 系の擬似要素を無視する」という趣旨の説明があります。Chromium での動きは次の章で実際に計測しました。Firefox と Safari での表示は今回は未実行で、対応バージョンの情報のみを載せています。

Firefox についての補足です。MDN の対応データによると、Firefox 153 と 154 では @supports selector(::-webkit-scrollbar) の判定が true を返し、display: none と、0以外の width・height だけが効く部分的な対応が入っていました（155 でこの対応は外れています）。Firefox 153 は延長サポート版（ESR）でもあるため、@supports の条件に selector(::-webkit-scrollbar) を使う書き方は、ブラウザによって判定が変わることを覚えておくと役立ちます。この記事では、標準プロパティの対応状況で判定する書き方をおすすめしています。

検証環境と計測のしかた

• ブラウザ：Chromium 141.0.7390.37（Playwright 1.56.0 に同梱、Linux、ヘッドレス）
• Playwright は既定でスクロールバーを隠して起動するため、その起動オプション（--hide-scrollbars）を外して計測しました。
• バーの幅：要素の offsetWidth から clientWidth を引いた値
• バーの色：スクリーンショットを撮り、つまみと背景の位置のピクセルの色を読み取りました。
• 区別しやすいよう、-webkit- 側は「幅20px・つまみ赤（#ff0000）・背景青（#0000ff）」、標準側は「つまみ緑（#00ff00）・背景黒（#000000）」にしています。

計測に使ったHTMLの形は次のとおりです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<style>
  .s {
    width: 200px;
    height: 200px;
    overflow-y: scroll;
    background: #fff;
  }
  /* ここに試したい指定を足す */
</style>
</head>
<body>
  <div class="s">
    <div style="height: 800px"></div>
  </div>
</body>
</html>

この環境のスクロールバーは、幅を取るタイプ（クラシックスクロールバー）で、既定の幅は 15px でした。macOS やスマートフォンでは、内容の上に重なって表示されるタイプ（オーバーレイスクロールバー）が既定のことが多く、その場合バーは幅を取りません。OSの設定によって見え方が変わる点は、最後の章でも触れます。

標準プロパティで色と幅を変える

色を変える：scrollbar-color

1つ目がつまみの色、2つ目が背景の色です。

.s {
  scrollbar-color: #4b6bfb #eef1f6; /* つまみ 背景 */
}

計測では、scrollbar-color: #00ff00 #000000 を指定すると、幅は 15px のまま、つまみが #00ff00、背景が #000000 になりました。

scrollbar-color は子要素に継承されるプロパティです。親に書くと、その中のスクロールする要素すべてに効きます。この性質は、-webkit- と併用するときに関係してきます（後述）。

細くする：scrollbar-width

.s {
  scrollbar-width: thin;
}

指定できるのは auto・thin・none の3つだけで、px などの数値は指定できません。 thin が何pxになるかはブラウザとOSが決めます。今回の環境では 10px でした。「8pxにしたい」のように太さを細かく決めたい場合は、-webkit- 擬似要素を使います。

ページ全体のバーを変える：htmlに指定する

ページ全体（ビューポート）のスクロールバーを変えるときは、html 要素（:root）に指定します。

:root {
  scrollbar-color: #4b6bfb #eef1f6;
  scrollbar-width: thin;
}

計測では、html に scrollbar-color を書くとビューポートのバーに色が付きましたが、body に書いた場合は既定の色のままでした。

ダークモードに合わせる：color-scheme

色を1つずつ決めなくても、color-scheme: dark を指定すると、ブラウザ既定のバーが暗い配色に切り替わります。

:root {
  color-scheme: light dark; /* OSの設定に合わせて切り替える */
}

計測では、要素に color-scheme: dark を指定すると、つまみが #9f9f9f、背景が #2c2c2c になりました（幅は 15px のまま）。「暗い画面で白いバーが目立つ」という悩みは、この1行で解決できることが多いです。

-webkit-擬似要素で細かくデザインする

角丸や太さのpx指定など、標準プロパティではできない装飾は ::-webkit-scrollbar 系で行います。

/* バー全体：縦バーの太さは width、横バーの太さは height */
.s::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

/* 背景 */
.s::-webkit-scrollbar-track {
  background: #eef1f6;
}

/* つまみ */
.s::-webkit-scrollbar-thumb {
  background: #4b6bfb;
  border-radius: 4px;
}

/* つまみにカーソルを載せたとき */
.s::-webkit-scrollbar-thumb:hover {
  background: #2f49c8;
}

計測結果です（色は区別用の赤・青で指定）。

書く順番は、まず ::-webkit-scrollbar に width か height を指定し、そのうえで thumb と track を足す、と覚えておくと迷いません。 一般に、::-webkit-scrollbar 本体の指定がないと thumb や track の指定は反映されず、本体を指定したあとは thumb に background を書かないとつまみが見えなくなる、とされています（この2点を単独で切り分けた計測は未実行です。上の表は、本体・thumb・track をすべて指定した場合の結果です）。

ページ全体のバーに使う場合は、html でも body でも効きました（どちらも幅 12px を指定して、ビューポートのバーが 12px になることを確認）。

html::-webkit-scrollbar { width: 12px; }

標準と-webkit-を両方書くとどうなるか（Chrome 121以降）

ここがこの記事でいちばん伝えたい部分です。Chrome・Edge は 121 から標準プロパティに対応しました。それ以降は、標準プロパティを書くと -webkit- の指定が使われなくなります。

「Firefox 用に scrollbar-color を足したら、Chrome のバーの見た目が変わった」という現象は、これが理由です。

計測結果

-webkit- 側（幅20px・赤／青）と標準側（緑／黒）を同じ要素に書いて確かめました。

読み取れることは3つです。

• scrollbar-color か scrollbar-width のどちらかを auto 以外にすると、-webkit- の指定はまるごと使われなくなります。 色だけ標準で指定した場合も、-webkit- で決めた幅（20px）は無視され、既定の 15px に戻りました。
• auto を明示した場合は、-webkit- が効きます。 「標準プロパティを書いたかどうか」ではなく、「値が auto 以外かどうか」で決まります。
• scrollbar-color は継承されるので、親や html に書いただけで、子要素の -webkit- 指定が効かなくなります。 共通のスタイルシートで :root に scrollbar-color を書いている場合は、ここを確認してみてください。

部分的に-webkit-へ戻したいとき

サイト全体では標準プロパティを使い、特定の要素だけ -webkit- の装飾にしたい場合は、その要素で標準プロパティを auto に戻します。

:root {
  scrollbar-color: #4b6bfb #eef1f6;
}

/* この要素だけ -webkit- のデザインを使う */
.fancy {
  scrollbar-color: auto;
  scrollbar-width: auto;
}
.fancy::-webkit-scrollbar { width: 8px; }
.fancy::-webkit-scrollbar-thumb { background: #4b6bfb; border-radius: 4px; }

上の計測のとおり、要素自身に auto を明示すれば -webkit- が効くことを確認しています（親の指定を auto で打ち消す組み合わせそのものは未実行です）。

@supportsで書き分けるコピペ用コード

両方を安心して併用するには、@supports で「どちらを使うか」をはっきり分けます。 2つの方針があります。

方針A：標準を優先する（おすすめ）

scrollbar-color に対応していればそちらを使い、対応していないブラウザだけ -webkit- を使います。

.scroller {
  --sb-thumb: #4b6bfb;
  --sb-track: #eef1f6;
}

/* 標準プロパティに対応しているブラウザ */
@supports (scrollbar-color: auto) {
  .scroller {
    scrollbar-color: var(--sb-thumb) var(--sb-track);
    scrollbar-width: thin;
  }
}

/* 標準プロパティに対応していないブラウザ */
@supports not (scrollbar-color: auto) {
  .scroller::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  .scroller::-webkit-scrollbar-track {
    background: var(--sb-track);
  }
  .scroller::-webkit-scrollbar-thumb {
    background: var(--sb-thumb);
    border-radius: 4px;
  }
}

Chromium 141 で、この形（標準側を緑／黒・thin、-webkit- 側を20px・赤／青にしたもの）を計測すると、幅 10px・つまみ #00ff00・背景 #000000 となり、標準側だけが使われました。

方針B：-webkit-を優先する

Chrome・Edge・Safari では -webkit- の細かいデザインを使い、それ以外では標準プロパティを使います。

/* -webkit- 擬似要素に対応しているブラウザ */
@supports selector(::-webkit-scrollbar) {
  .scroller::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  .scroller::-webkit-scrollbar-track {
    background: #eef1f6;
  }
  .scroller::-webkit-scrollbar-thumb {
    background: #4b6bfb;
    border-radius: 4px;
  }
}

/* 対応していないブラウザ */
@supports not selector(::-webkit-scrollbar) {
  .scroller {
    scrollbar-color: #4b6bfb #eef1f6;
    scrollbar-width: thin;
  }
}

同じ区別用の色で計測すると、Chromium 141 では幅 20px・つまみ #ff0000・背景 #0000ff となり、-webkit- 側が使われました。

方針Bで気を付けたいのは、前の章で触れた Firefox 153・154 です。これらの版は selector(::-webkit-scrollbar) の判定が true になるため、標準プロパティ側のブロックが読まれません。どのブラウザでも同じ判定にしたい場合は、方針Aが安定します。

Chromeの公式ドキュメントの書き方について

Chrome の開発者向けドキュメント（Scrollbar styling）には、@supports (scrollbar-width: auto) で標準プロパティを、@supports selector(::-webkit-scrollbar) で -webkit- を、それぞれ別のブロックに書く例が載っています。この形を Chromium 141 で試すと、両方の条件が true になり、標準側が優先されて幅 10px・緑／黒になりました。Chrome では方針Aと同じ結果になる、ということです。

スクロールバーを非表示にする

スクロールはできるまま、バーだけを隠す書き方です。

.hide-scrollbar {
  scrollbar-width: none;        /* 標準（Chrome 121・Firefox 64・Safari 18.2 以降） */
  -ms-overflow-style: none;     /* 以前の Edge・IE 向け */
}
.hide-scrollbar::-webkit-scrollbar {
  display: none;                /* 標準に対応する前の Chrome・Edge・Safari 向け */
}

計測では、この3点セットでバーの幅が 0px になりました。また、scrollbar-width: none を指定した要素の上でマウスホイールを回すと、scrollTop が 0 から 300 に変わり、スクロール自体は働くことを確認しています（-ms-overflow-style が効くブラウザでの確認は未実行です）。

overflow: hiddenとの違い

「バーを消したい」のか「スクロールさせたくない」のかで使い分けます。

非表示にするときに気を配りたいこと

MDN の scrollbar-width のページでは、thin や none にすると内容がスクロールしにくくなる場合があるため、慎重に使うよう案内されています。バーを隠すと、「ここはスクロールできる」という手がかりも一緒に消えます。 次のような工夫を添えると、使う人が迷いにくくなります。

横スクロールのタブ一覧でバーを隠す例です。

<nav class="tabs hide-scrollbar" tabindex="0" aria-label="カテゴリ">
  <a href="#all">すべて</a>
  <a href="#news">お知らせ</a>
  <a href="#blog">ブログ</a>
  <a href="#event">イベント</a>
  <a href="#faq">よくある質問</a>
</nav>

.tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  white-space: nowrap;
}
.tabs a {
  flex: 0 0 auto;
  padding: 8px 16px;
}

ホバー時だけバーを表示する

普段はバーを目立たせず、カーソルを載せたときだけ色を付ける方法です。scrollbar-color を透明にしておき、:hover で色を付けます。

.hover-scrollbar {
  overflow-y: scroll;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
.hover-scrollbar:hover,
.hover-scrollbar:focus-within {
  scrollbar-color: #4b6bfb #eef1f6;
}

計測（:hover の色を赤 #ff0000 と薄いグレー #eeeeee にしたもの）の結果です。

バーの幅（10px）は常に確保されたままなので、表示が切り替わっても中身の幅は変わりません。 レイアウトが動かないのがこの方法のよい点です。:focus-within を足しておくと、キーボードで中の要素に移動したときにもバーが見えます（:focus-within の動作は未実行です）。

なお、同じことを -webkit- 擬似要素（つまみを transparent にして、要素の :hover でつまみに色を付ける）でも試しましたが、今回のヘッドレス環境での計測では、カーソルを載せても色の変化を確認できませんでした。 ホバーでの切り替えは、標準プロパティで書くほうが確実に動きました。

scrollbar-gutterでレイアウトのガタつきを防ぐ

overflow: auto の要素は、中身が増えてバーが出た瞬間に、バーの幅だけ中身が狭くなります。一覧の件数が変わったときや、ページの長さが変わったときに横にカクッとずれるのは、これが原因です。

scrollbar-gutter: stable は、バーが出ていないときも、バーの分の幅をあらかじめ空けておく指定です。

.list {
  overflow-y: auto;
  scrollbar-gutter: stable;
}

幅200pxの要素で、中身が短いとき（バーなし）と長いとき（バーあり）の「中身の幅」を計測しました。

• stable：バーが出る側に、常に 15px（バーの幅）を空けます。
• stable both-edges：反対側にも同じ幅を空けます。中身を左右対称に置きたいときに使います。

ページ全体のガタつきを防ぐ

短いページから長いページへ移動したときに、ヘッダーや中央寄せの内容が横にずれる現象にも使えます。html 要素に指定します。

html {
  scrollbar-gutter: stable;
}

ビューポートの幅 400px で、ページの中身の幅（html の clientWidth）を計測しました。

overflow-y: scroll でも幅はそろいますが、こちらはスクロールの必要がないページでも空のバーが常に表示されます。scrollbar-gutter: stable は幅だけを確保する、という違いがあります。

MDN の scrollbar-gutter のページによると、オーバーレイスクロールバー（内容に重なるタイプ）の環境では、stable を指定しても幅は確保されません。 もともとバーが幅を取らないので、ずれも起きないためです。

目的別のコピペ集

1. サイト全体を細めの色つきバーにする

:root {
  scrollbar-color: #9aa4b2 transparent;
  scrollbar-width: thin;
}

背景を transparent にすると、ページの背景色がそのまま見えます。いちばん短く書ける形です。標準プロパティに対応していないブラウザでは、既定のバーが表示されます。

2. 特定のボックスだけデザインする（書き分けつき）

.panel {
  max-height: 240px;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

@supports (scrollbar-color: auto) {
  .panel {
    scrollbar-color: #4b6bfb #eef1f6;
    scrollbar-width: thin;
  }
}

@supports not (scrollbar-color: auto) {
  .panel::-webkit-scrollbar { width: 8px; }
  .panel::-webkit-scrollbar-track { background: #eef1f6; }
  .panel::-webkit-scrollbar-thumb { background: #4b6bfb; border-radius: 4px; }
}

3. 角丸のバーを Chrome・Edge・Safari で使う

.rounded {
  overflow-y: auto;
  scrollbar-color: auto;   /* 親から継承した指定を打ち消す */
  scrollbar-width: auto;
}
.rounded::-webkit-scrollbar { width: 10px; }
.rounded::-webkit-scrollbar-track { background: transparent; }
.rounded::-webkit-scrollbar-thumb {
  background: #9aa4b2;
  border-radius: 5px;
  border: 2px solid transparent;   /* つまみの周りに余白を作る */
  background-clip: content-box;
}

border と background-clip を組み合わせる余白の付け方は、今回は未実行です。Firefox ではこのブロックは使われず、既定のバーになります。

4. コードブロックの横スクロールを控えめにする

pre {
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: #9aa4b2 transparent;
}

5. モーダルを開いたときに背景がずれないようにする

html {
  scrollbar-gutter: stable;
}
html.modal-open {
  overflow: hidden;
}

MDN では、scrollbar-gutter: stable は overflow が hidden のときも幅を確保すると説明されています。モーダルを開いて背景のスクロールを止めても、バーの分の幅が残るので、背景が横に動きにくくなります（この組み合わせの計測は未実行です）。

うまく効かないときのチェック表

OSによる見え方の違い

スクロールバーには、幅を取る「クラシック」と、内容に重なる「オーバーレイ」があります。Chrome の開発者向けドキュメントには、オーバーレイの場合、背景（track）の色は既定では表示されず、バーにカーソルを載せたときに現れると書かれています。今回の計測はクラシックの環境だけで行っており、オーバーレイ環境での表示は未実行です。

色や幅を決めるときは、次の点を意識すると、どの環境でも使いやすくなります。

よくある質問

Q. scrollbar-width で太さを px で指定できますか？ A. できません。指定できるのは auto・thin・none の3つです。px で決めたい場合は ::-webkit-scrollbar { width: 8px; } を使います。今回の環境では、thin は 10px、auto は 15px でした。

Q. Firefox 用に scrollbar-color を足したら、Chrome の見た目が変わりました。なぜですか？ A. Chrome・Edge は 121 から標準プロパティに対応し、scrollbar-color や scrollbar-width が auto 以外のときは ::-webkit-scrollbar の指定を使わなくなったためです。計測でも、-webkit- で 20px・赤にしたバーが、scrollbar-color を足すと 15px・標準側の色になりました。@supports で書き分けると意図どおりになります。

Q. スクロールバーを非表示にしても、スクロールはできますか？ A. できます。scrollbar-width: none を指定した要素でホイール操作をして、スクロール位置が動くことを確認しました。スクロールそのものを止めたい場合は overflow: hidden を使います。

Q. scrollbar-gutter と overflow-y: scroll はどう違いますか？ A. どちらもバーの分の幅を確保しますが、overflow-y: scroll は中身が短くても空のバーが表示されます。scrollbar-gutter: stable は幅だけを空けておき、バーは必要なときだけ表示されます。

まとめ

• スクロールバーの指定は、標準（scrollbar-color・scrollbar-width）と ::-webkit-scrollbar 系の2系統です。
• 標準プロパティは Chrome・Edge 121、Firefox 64 から。 Safari は scrollbar-width が 18.2、scrollbar-color が 26.2 からです。
• Chrome 121以降は、標準プロパティが auto 以外だと -webkit- の指定が使われません。 親からの継承でも同じです。
• 併用するなら @supports で書き分けます。 @supports (scrollbar-color: auto) を基準にすると判定が安定します。
• 非表示は scrollbar-width: none と ::-webkit-scrollbar { display: none }。 スクロールは働いたままです。
• ホバー時だけ表示は、scrollbar-color を transparent にして :hover で色を付ける方法が確実でした。
• scrollbar-gutter: stable でバーの幅を先に確保すると、内容が増減してもレイアウトがずれません。

株式会社RJCでは、CSSのスクロールバーの指定やブラウザごとの違いを仲間と学び合っています。こうした知識を共有しながら、日々技術を磨いています。

株式会社RJC ― SI事業・SES事業・AI駆動開発。RJCは一緒に成長を楽しめる会社です。