CSSでスクロールバーのスタイルを設定する方法
序章
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トピックページで演習とプログラミングプロジェクトを確認してください。