開発者ドキュメント

CSSでスクロールバーのスタイルを設定する方法

getdocs

序章

2018年9月、W3C CSS Scrollbars は、CSSを使用してスクロールバーの外観をカスタマイズするための仕様を定義しました。

2020年の時点で、 96 % o fインターネットユーザーは、CSSスクロールバースタイルをサポートするブラウザーを実行しています。 ただし、BlinkとWebKit、およびFirefoxブラウザーをカバーするために2セットのCSSルールを作成する必要があります。

このチュートリアルでは、CSSを使用してスクロールバーをカスタマイズし、最新のブラウザーをサポートする方法を学習します。

前提条件

この記事をフォローするには、次のものが必要です。

Chrome、Edge、Safariでのスクロールバーのスタイリング

現在、Chrome、Edge、Safariのスタイリングスクロールバーは、ベンダープレフィックスの疑似要素-webkit-scrollbarで利用できます。

::-webkit-scrollbar、::-webkit-scrollbar-track、および::webkit-scrollbar-thumb疑似要素を使用する例を次に示します。

body::-webkit-scrollbar {
  width: 12px;               /* width of the entire scrollbar */
}

body::-webkit-scrollbar-track {
  background: orange;        /* color of the tracking area */
}

body::-webkit-scrollbar-thumb {
  background-color: blue;    /* color of the scroll thumb */
  border-radius: 20px;       /* roundness of the scroll thumb */
  border: 3px solid orange;  /* creates padding around scroll thumb */
}

これらのCSSルールで作成されたスクロールバーのスクリーンショットは次のとおりです。

このコードは、Chrome、Edge、Safariの最新リリースで機能します。

残念ながら、この仕様はW3C によって正式に廃止されており、今後廃止される可能性があります。

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

現在、Firefoxのスタイリングスクロールバーは、新しいCSSスクロールバーで使用できます。

scrollbar-widthおよびscrollbar-colorプロパティを使用する例を次に示します。

body {
  scrollbar-width: thin;          /* "auto" or "thin" */
  scrollbar-color: blue orange;   /* scroll thumb and track */ 
}

これらのCSSルールで作成されたスクロールバーのスクリーンショットは次のとおりです。

この仕様は、スクロールバーの色を制御するための-webkit-scrollbar仕様といくつかの共通点があります。 ただし、現在、「トラックサム」のパディングと丸みを変更するためのサポートはありません。

将来性のあるスクロールバースタイルの構築

-webkit-scrollbarとCSS Scrollbarsの両方の仕様をサポートする方法でCSSを作成できます。

scrollbar-width、scrollbar-color、::-webkit-scrollbar、::-webkit-scrollbar-track、::webkit-scrollbar-thumbを使用する例を次に示します。

/* Works on Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: blue orange;
}

/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 12px;
}

*::-webkit-scrollbar-track {
  background: orange;
}

*::-webkit-scrollbar-thumb {
  background-color: blue;
  border-radius: 20px;
  border: 3px solid orange;
}

BlinkおよびWebKitブラウザーは、認識しないルールを無視し、-webkit-scrollbarルールを適用します。 Firefoxブラウザは、認識しないルールを無視し、CSS Scrollbarsルールを適用します。 BlinkおよびWebKitブラウザーが-webkit-scrollbar仕様を完全に廃止すると、新しいCSS Scrollbars仕様に正常にフォールバックします。

結論

この記事では、CSSを使用してスクロールバーのスタイルを設定する方法と、これらのスタイルが最新のブラウザーで確実に認識されるようにする方法を紹介しました。

デフォルトのスクロールバーを非表示にし、JavaScriptを使用して高さとスクロール位置を検出することにより、スクロールバーをシミュレートすることもできます。 ただし、これらのアプローチでは、慣性スクロールなどのエクスペリエンスを再現する際に制限が発生します（たとえば、トラックパッドを介してスクロールするときのモーションの減衰）。

CSSの詳細については、CSSトピックページで演習とプログラミングプロジェクトを確認してください。

モバイルバージョンを終了