CSSでスクロールバーをカスタマイズ！WebKit & Firefox対応デザイン手法

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
普段のWeb制作で、デフォルトのスクロールバーに物足りなさを感じたことはありませんか？

特にダークテーマやブランドカラーを活かしたUIを作る際、スクロールバーが浮いてしまうと全体のデザイン統一感が損なわれます。

実は、CSSでスクロールバーの見た目を自由に整える方法があり、ChromeやSafariでは ::-webkit-scrollbar 系の疑似要素、Firefoxでは scrollbar-width や scrollbar-color を活用します。

この記事では、クロスブラウザを意識したスクロールバーカスタマイズを、
実用例を交えてわかりやすく解説します。

基本のHTML構造

まずはスクロールバーを適用する要素を用意します。

WebKit系ブラウザ（Chrome/Safari）のスタイル指定

::-webkit-scrollbar とその子要素で、スクロールバー全体・トラック・つまみを個別にデザインできます。

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

Firefox向けのスタイル指定

Firefoxでは scrollbar-width と scrollbar-color を使用します。

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

クロスブラウザ対応のポイント

応用例：ダークテーマに合わせたデザイン

ダークテーマサイトでは、背景と馴染むスクロールバー配色を設定します。

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

まとめ

 

satokotadesignキャンペーン実施中！