CSSでスクロールバーのデザインをカスタマイズする。

スクロールバーのデザインをCSSだけでカスタマイズする方法を具体例を挙げながらまとめていきます。すごく、簡単です。

普通にブラウザの右側に出てくるスクロールバーはまだいいですが、コンテンツの中でスクロールさせる要素のスクロールバーがダサすぎて、なんとかしたい人向けです。

ちなみに、今回メモするTipsは、-webkit系でのみ有効です。ご了承ください。

Firefoxでは、スクロールバーをCSSでカスタマイズすることは現状できないようですね。

-webkit-scrollbarでスクロールバーをカスタマイズできる

-webkit-scrollbarというプロパティを指定することで、スクロールバーのデザインはカスタマイズ可能です。

簡単なカスタマイズには簡単な知識だけしか必要ないと思うので、実際に私が扱った要素だけ紹介します。

• ::-webkit-scrollbar
• ::-webkit-scrollbar-track
• ::-webkit-scrollbar-thumb

以上の３要素だけで、ある程度スクロールバーをカスタマイズできます。

-webkit-scrollbarについて、詳しくはこちらのサイト(「WebKitを使ってスクロールバーをカスタマイズ」)がすごく詳しくまとめてくれています。

実際のスクロールバーカスタマイズ例

では、実際にどう記述すればどうなるか。

まずは 当サイト全体で使用しているスクロールバーの実装方法から紹介します。

ページのスクロールバーは独特なものにしすぎても逆にわかりにくいので、Macのスクロールバーを真似て作りました。

Windowではよりシンプルに。Macでは見慣れたもののままで違和感なく。

::-webkit-scrollbar{
　　width: 10px;
}
::-webkit-scrollbar-track{
　　background: #fff;
　　border-left: solid 1px #ececec;
}
::-webkit-scrollbar-thumb{
　　background: #ccc;
　　border-radius: 10px;
　　box-shadow: inset 0 0 0 2px #fff;
}

外枠の角も丸くした版

スクロールで動くバー？の外にある大枠も丸くしたいなら。下のような感じ。

::-webkit-scrollbar{
  width: 10px;
}
::-webkit-scrollbar-track{
  background: #fff;
  border: none;
  border-radius: 10px;
  box-shadow: inset 0 0 2px #777; 
}
::-webkit-scrollbar-thumb{
  background: #ccc;
  border-radius: 10px;
  box-shadow: none;
}

::-webkit-scrollbar-trackと::-webkit-scrollbar-thumbが少し違いますね。

どんな感じのスクロールバーになるかは以下をご覧ください。

スクロールバーの枠の縁が丸くなっていますね。

特定の要素（タグ）のスクロールバーをカスタマイズする

もう一つ、少し特殊なスクロールバーデザインの例をご紹介しておきます。

実際に、当サイトでソースコードを表示する preタグに使用しているスクロールバーのカスタマイズ方法です。

pre::-webkit-scrollbar{
　　height: 8px;
}

pre::-webkit-scrollbar-track{
  background: rgba(#fff,0.1);
  border: none;
}

pre::-webkit-scrollbar-thumb{
　　background: rgba(#fff,0.1);
　　border-radius: 8px;
　　box-shadow: inset 0 0 4px rgba(255,255,255,0.8);
}

/* このコメントはスクロールさせるために書いています。スクロールさせてみてくださーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーい。 */

クラス名付きのタグを指定するdiv.hogeと同様、pre::-webkit-〇〇のようにするだけです。

他にも、好きなようにアレンジしてみてください。

また、スマホでのスクロールに慣性をつけてなめらかにする方法もメモしていますので、こちらも是非参考にしてみてください。

あわせて読みたい

スマホ(iOS)でoverflowのスクロールをスムーズにする overflow:scroll で横に長い文章をスクロール可能にしたりする場合、iOSだと挙動がカクカクしますが、-webkit-overflow-scrolling の指定で慣性スクロールが可能に。 -w...