スクロールバーのCSSスタイリング

スクロールバーをCSSでスタイリングすることは、現時点ではまだ完全に標準化されていません。
しかし、Chrome、Edge、Safariなどに代表される[WebKit系のブラウザ（WebKit系ブラウザ）]は独自にスクロールバーをCSSでスタイリングする方法があり、[FirefoxやWebKit系のブラウザであるChrome、Edgeブラウザ]もW3Cで実験的に作成されたウェブ非標準の草案に基づいたCSSでスタイリングする方法があります。これら2つの方法に分けて説明します。

[WebKit系のブラウザ（WebKit系ブラウザ）]と[FirefoxをはじめとするChrome、Edgeブラウザ]で使用されるスクロールバーのCSSスタイリングを、それぞれ分けて見ていきます。

ChromeとEdgeブラウザは、
WebKit系のブラウザでありながら、Firefoxと同様にW3Cで実験的に作成されたウェブ非標準の草案に基づいたCSSでスタイリングすることにも含まれます。
したがって、これから説明する2つの方法の両方に含まれるブラウザです。

次の目次で説明します。

  1. [WebKit系ブラウザ]のスクロールバーCSSスタイリング
  2. [FirefoxをはじめとするChrome、Edgeブラウザ]のスクロールバーCSSスタイリング
  3. ブラウザ全体を考慮したスクロールバーCSSスタイリング

それぞれのブラウザ互換性を注意深く確認してください。

説明に先立ち、WebKit系の主なブラウザリストをご紹介します。

  • Chrome（Androidウェブビューを含む）
  • Edge（エッジ）
  • Safari（iOSブラウザを含む）
  • Samsung Internet（サムスンインターネット）
  • Opera（オペラ）

Firefoxを除いたほとんどの主要ブラウザがWebKit系のブラウザです。

😃WebKit系ブラウザのスクロールバーCSSスタイリングを行うということは、Firefoxを除いた（ほぼ）すべてのブラウザのスクロールバーをカスタムスタイリングするという意味です。

CSSスクロールバーセレクタ

WebKit系ブラウザのスクロールバーCSSスタイリングを行うためには、WebKit系ブラウザで提供されているスクロールバー関連の擬似要素セレクタを知る必要があります。次は、そのセレクタの中で最も頻繁に使用される4つの擬似要素セレクタです。

WebKit系ブラウザで提供されているスクロールバー関連の、最も頻繁に使用される4つの擬似要素セレクタ
::-webkit-scrollbar スクロールバー全体です。
::-webkit-scrollbar-track スクロールバーのトラック（プログレスバー）で、白いバーの上にグレーのバーがある部分です。
::-webkit-scrollbar-thumb ドラッグ可能なスクロールハンドルです。
::-webkit-scrollbar-button スクロールバーの矢印の形をしたボタンです。

ここに役立つダイアグラムがあります。

webkit-scollbar
WebKitブラウザのスクロールバーセレクタ

ブラウザの互換性に注意してください。

Safari iOS 13（モバイルSafari）から、
スクロールバーセレクタの中で ::-webkit-scrollbar 擬似要素セレクタに display: none を除くすべてのスクロールバーセレクタとカスタムスタイリングをサポートしていません。

例

さまざまな例を通じて、WebKit系ブラウザのスクロールバーCSSスタイリングを行う方法について見ていきましょう。

HTML 便宜上、HTMLコードは共通で使用します。 
<div class="container">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    In sagittis purus sit amet felis aliquam, at aliquam odio consequat.
    Morbi id faucibus turpis. Aenean risus mi,
    euismod vitae pulvinar vitae, ultricies vel dolor.
    Vivamus ac condimentum urna, sed condimentum orci.
    Mauris sed elit in lectus iaculis elementum id eget ante.
    Maecenas vulputate feugiat arcu, eu accumsan nisl pharetra eget.
    Vestibulum bibendum vehicula risus sed elementum.
    Duis porttitor sapien ut justo ultrices, vitae sollicitudin arcu lacinia.
    Aliquam volutpat elit non dui luctus efficitur.
</div>

基本スタイリング

CSS 
.container {
    padding: 0 0.5em;
    max-width: 360px;
    height: 150px;
    overflow: auto;
}
.container::-webkit-scrollbar {
    width: 10px;
}
.container::-webkit-scrollbar-track {
    background-color: gray;
}
.container::-webkit-scrollbar-thumb { 
    background-color: skyblue;
}
.container::-webkit-scrollbar-button {
    display: none;
}
実際に適用された様子 スクロールバーをドラッグしてみてください。

この例は、最も一般的なスクロールバーのスタイリングです。スクロールバーの矢印の形をしたボタンである ::-webkit-scrollbar-button は、display: none に設定して表示から除外しています。

hover効果を追加する

CSS 
.container {
    padding: 0 0.5em;
    max-width: 360px;
    height: 150px;
    overflow: auto;
}
.container::-webkit-scrollbar {
    width: 10px;
}
.container::-webkit-scrollbar-track { 
    background-color: gray;
}
.container::-webkit-scrollbar-thumb { 
    background-color: skyblue;
}
.container::-webkit-scrollbar-button {
    display: none;
}

/* hover効果 */
.container::-webkit-scrollbar-thumb:hover {
    background-color: blue;
    transition: all 0.2s; /* 作動しません */
}
実際に適用された様子 スクロールバーをドラッグしてみてください。

この例は、最も一般的なスクロールバースタイリングにhover効果を追加しました。

注意点
WebKit系ブラウザで提供されているスクロールバー関連の擬似要素セレクタには、transition や animation 関連のプロパティは作動しません。

コーナーにラウンド効果を追加する

CSS 
.container {
    padding: 0 0.5em;
    max-width: 360px;
    height: 150px;
    overflow: auto;
}
.container::-webkit-scrollbar {
    width: 10px;
}
.container::-webkit-scrollbar-track { 
    background-color: gray;
}
.container::-webkit-scrollbar-thumb { 
    background-color: skyblue;
}
.container::-webkit-scrollbar-button {
    display: none;
}

/* hover効果 */
.container::-webkit-scrollbar-thumb:hover {
    background-color: blue;
    transition: all 0.2s; /* 作動しません */
}

/* コーナーにラウンド効果 */
.container::-webkit-scrollbar-track,
.container::-webkit-scrollbar-thumb {
    border-radius: 5px;
}
実際に適用された様子

作動しないことに注意

::-webkit-scrollbar 擬似要素をスタイリングしない限り、すべてのスクロールバーセレクタとカスタムスタイリングは作動しません。
ブラウザのデフォルトスタイルがそのまま適用されます。

::-webkit-scrollbar 擬似要素は、スクロールバーセレクタとカスタムスタイリングにおいて、スタイルが適用される優先順位に該当するセレクタです。WebKitブラウザでスクロールバーのCSSスタイリングを行うには、::-webkit-scrollbar を明示的にスタイリングする必要があります。

CSS 
.container {
    padding: 0 0.5em;
    max-width: 360px;
    height: 150px;
    overflow: auto;
}

/*
.container::-webkit-scrollbar {
    width: 10px;
}
*/

.container::-webkit-scrollbar-track {
    background-color: gray;
}
.container::-webkit-scrollbar-thumb { 
    background-color: skyblue;
}
.container::-webkit-scrollbar-button {
    display: none;
}
実際に適用された様子 スクロールバーのカスタムCSSスタイリングが適用されていません。

スクロールバーを非表示にする（消去する）

モバイルアプリでコンテンツはスクロールするのに、スクロールバーが表示されていないケースを多く目にしたことがあるはずです。タッチベースのデバイスにおいて、このような実装は非常に一般的であり、ユーザーにとっても非常に馴染み深いものです。

次はスクロールバーを非表示にするコードの例です。
CSSでスクロールバーを非表示にしたとしても、スクロール機能は維持されます。（もちろん、スクロールバー領域を overflow: hidden; に設定しない限りは……）

アクセシビリティに関する考慮事項
スクロールバーを非表示にする際は、視覚的なアクセシビリティを考慮し、ユーザーに対してスクロール可能であることを示す十分な手がかり（ヒント）を提供する必要があります。タッチベースのデバイスでのみ使用してください！

CSS 
.container {
    padding: 0 0.5em;
    max-width: 360px;
    height: 150px;
    overflow: auto;
}
.container::-webkit-scrollbar {
    display: none;
}
実際に適用された様子 マウスカーソルを置いて、マウスホイールでスクロールしてみてください。

これらのCSSプロパティは「CSS Scrollbars」と呼ばれ、2つのプロパ티があります。

Firefoxブラウザでは、W3Cが2023年8月に公開した草案（Working Draft）である CSS Scrollbars Styling Module Level 1に基づいた、スクロールバー関連のCSSプロパティをサポートしています。

🔊 アップデート通知！
ChromeとEdgeブラウザでも、バージョン121からデスクトップとモバイルの両方でサポートされています。

CSS Scrollbars

スクロールバーの色と太さを指定する2つのプロパティがあります。

CSS Scrollbars
scrollbar-color スクロールバーの色を指定します。
scrollbar-width スクロールバーの太さ（幅）を指定します。
CSS 
selector {
    scollbar-color: gray darkgray;
    scollbar-width: thin;
}

ここに役立つダイアグラムがあります。

CSS Scrollbars
CSS Scrollbarsプロパティ

scrollbar-colorプロパティ

scrollbar-color プロパティは、スクロールバーの色を指定します。構文と定義について見ていきましょう。

CSS 
selector {
    scrollbar-color: auto || [ <thumb color> <track color> ]
}
scrollbar-colorプロパティの定義
初期値 auto
適用要素 scrolling boxes
継承 はい

属性値

scrollbar-width属性値
auto 初期値です。
ブラウザが提供するスクロールバーのデフォルトの色です。
<thumb color> <track color> 最初の色をスクロールバーのthumb（ドラッグ可能なスクロールハンドル）に適用し、2番目の色をスクロールバーのtrackに適用します。

例

HTML 
<div class="container">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    In sagittis purus sit amet felis aliquam, at aliquam odio consequat.
    Morbi id faucibus turpis. Aenean risus mi,
    euismod vitae pulvinar vitae, ultricies vel dolor.
    Vivamus ac condimentum urna, sed condimentum orci.
    Mauris sed elit in lectus iaculis elementum id eget ante.
    Maecenas vulputate feugiat arcu, eu accumsan nisl pharetra eget.
    Vestibulum bibendum vehicula risus sed elementum.
    Duis porttitor sapien ut justo ultrices, vitae sollicitudin arcu lacinia.
    Aliquam volutpat elit non dui luctus efficitur.
</div>
CSS 
.container {
    padding: 0 0.5em;
    max-width: 360px;
    height: 150px;
    overflow: auto;
    scrollbar-color: skyblue gray;
}
実際に適用された様子 [Firefoxをはじめ、Chrome、Edgeブラウザ]で適用されます。

scrollbar-widthプロパティ

scrollbar-width プロパティは、スクロールバーの太さ（幅）を指定します。構文と定義について見ていきましょう。

CSS 
selector {
    scrollbar-width: auto | thin | none
}
scrollbar-widthプロパティの定義
初期値 auto
適用要素 scrolling boxes
継承 いいえ

属性値

scrollbar-color属性値
auto 初期値です。
ブラウザが提供するスクロールバーのデフォルトの幅です。
thin ブラウザが提供するスクロールバーのデフォルトの幅より細い幅です。
none スクロールバーは表示されませんが、要素は引き続きスクロール可能です。

例

HTML 
<div class="container">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    In sagittis purus sit amet felis aliquam, at aliquam odio consequat.
    Morbi id faucibus turpis. Aenean risus mi,
    euismod vitae pulvinar vitae, ultricies vel dolor.
    Vivamus ac condimentum urna, sed condimentum orci.
    Mauris sed elit in lectus iaculis elementum id eget ante.
    Maecenas vulputate feugiat arcu, eu accumsan nisl pharetra eget.
    Vestibulum bibendum vehicula risus sed elementum.
    Duis porttitor sapien ut justo ultrices, vitae sollicitudin arcu lacinia.
    Aliquam volutpat elit non dui luctus efficitur.
</div>
CSS 
.container {
    padding: 0 0.5em;
    max-width: 360px;
    height: 150px;
    overflow: auto;
    scrollbar-width: thin;
}
実際に適用された様子 [Firefoxをはじめ、Chrome、Edge、Safariブラウザ]で適用されます。

スクロールバーを非表示にするには、scrollbar-width: noneと指定します。この場合、スクロールバーは表示されませんが、要素は引き続きスクロール可能です。

CSS 
selector {
    scrollbar-width: none;
}

scrollbar-colorとscrollbar-widthプロパティを一緒に使用する

HTML 
<div class="container">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    In sagittis purus sit amet felis aliquam, at aliquam odio consequat.
    Morbi id faucibus turpis. Aenean risus mi,
    euismod vitae pulvinar vitae, ultricies vel dolor.
    Vivamus ac condimentum urna, sed condimentum orci.
    Mauris sed elit in lectus iaculis elementum id eget ante.
    Maecenas vulputate feugiat arcu, eu accumsan nisl pharetra eget.
    Vestibulum bibendum vehicula risus sed elementum.
    Duis porttitor sapien ut justo ultrices, vitae sollicitudin arcu lacinia.
    Aliquam volutpat elit non dui luctus efficitur.
</div>
CSS 
.container {
    padding: 0 0.5em;
    max-width: 360px;
    height: 150px;
    overflow: auto;
    scrollbar-color: skyblue gray;
    scrollbar-width: thin;
}
実際に適用された様子 [Firefoxをはじめ、Chrome、Edge、Safariブラウザ]で適用されます。

Webkit系のブラウザとFirefoxブラウザの両方を考慮したスクロールバーのカスタムCSSスタイリングには限界があります。Firefoxで使用されるスクロールバー関連のプロパティは、スクロールバーの色と幅のみをカスタムでサポートしており、コーナーに角丸効果を追加することはできず、スクロールバーの幅はデフォルトの幅より少し細くする程度しか設定できないため、Webkit系のブラウザとFirefoxブラウザの両方を同一のスタイルで指定することはできませんが、次のように似たようなスタイルで指定することは可能です。

  • Webkit系とFirefoxでスクロールバーを非表示にする
  • 角に丸みのない、幅の狭いスクロールバー

次の2つの例を通して見ていきましょう。

CSS Webkit系とFirefoxでスクロールバーを非表示にする 
.container {
    padding: 0 0.5em;
    max-width: 360px;
    height: 150px;
    overflow: auto;
    scrollbar-width: none; /* Firefox, Chrome, Edgeでスクロールバーを非表示にする */
}
.container::-webkit-scrollbar {
    display: none; /* Webkit系のスクロールバーを非表示にする */
}
CSS 角に丸みのない、幅の狭いスクロールバー 
.container {
    padding: 0 0.5em;
    max-width: 360px;
    height: 150px;
    overflow: auto;

    /* Firefox, Chrome, Edge スクロールバー */
    scrollbar-color: skyblue gray;
    scrollbar-width: thin;
}

/* Webkit系 スクロールバー */
.container::-webkit-scrollbar {
    width: 10px;
}
.container::-webkit-scrollbar-track {
    background-color: gray;
}
.container::-webkit-scrollbar-thumb { 
    background-color: skyblue;
}
.container::-webkit-scrollbar-button {
    display: none;
}

あらかじめスクロールバー表示のためのスペースを確保

要素の領域の変化により、スクロールバーの有無に応じてテキストが急にずれたり揺れたりする視覚的な変化を、一度は経験したことがあるでしょう。

scrollbar-gutterプロパティを使用すると、スクロールバーが表示されるかどうかにかかわらず、スクロールバーが表示されるためのスペースをあらかじめ確保できます。これにより、該当する要素の領域の変化によってスクロールバーが急に現れたとしても、あらかじめ確保されたスペースのおかげで、コンテンツが急にずれたり揺れたりするなどの不要な視覚的変化を防ぐことができます。

CSSデモ：scrollbar-gutter

次のコード例を通して見ていきましょう。

参考にしてください！
下の例で実際に適用された様子に使用されたアニメーションは、スクロールバーを動的に実装するためのものであり、コードの内容には含めていません。

要素に scrollbar-gutter: stable を設定すると、 overflow が hidden、 scroll、または auto のとき、実際に要素が溢れていなくても スクロールバーの空間（ガター）が常に存在 します。

注意：このプロパティはスクロールバー自体の表示の有無を変更するのではなく、単にスクロールバーの空間（ガター）の存在の有無のみを制御します。

HTML 
<div class="container">
    Lorem Ipsum is simply dummy text of the printing and
    typesetting industry. Lorem Ipsum has been
    the industry's standard dummy text ever since the 1500s,
    when an unknown printer...
</div>
CSS 
.container {
    width: 250px;
    height: 200px;
    border: 5px solid #663399;
    background: rgba(255, 0, 200, .15);
    overflow: auto;
    scrollbar-gutter: stable;
}

該当する要素の領域の変化によってスクロールバーが急に現れたとしても、あらかじめ確保されたスペースのおかげで、コンテンツが急にずれたり揺れたりするなどの不要な視覚的変化を防ぐことができます。

実際に適用された様子

最終更新日:

デスクトップブラウザにおけるスクロールバー(Scrollbars)カスタムスタイリングの互換性
デスクトップ
デスクトップ Chrome
Chrome
デスクトップデスクトップ Edge
Edge
デスクトップ Firefox
Firefox
Safari
Safari
::-webkit-scrollbar 2 79 いいえ 4
::-webkit-scrollbar-track 2 79 いいえ 4
::-webkit-scrollbar-thumb 2 79 いいえ 4
::-webkit-scrollbar-button 2 79 いいえ 4
scrollbar-color 121 121 64 26.2
scrollbar-width 121 121 64 18.2

最終更新日:

モバイルブラウザにおけるスクロールバー(Scrollbars)カスタムスタイリングの互換性
モバイル
モバイル Chrome
Chrome
モバイル Firefox
Firefox
Safari
Safari
::-webkit-scrollbar 18 いいえ 13, only display: none
::-webkit-scrollbar-track 18 いいえ いいえ
::-webkit-scrollbar-thumb 18 いいえ いいえ
::-webkit-scrollbar-button 8 いいえ いいえ
scrollbar-color 121 64 26.2
scrollbar-width 121 64 18.2

WebView Androidでは scrollbar-color をサポートしていません。

参考資料

関連項目