CSSを使ってスクロールバーのデザインをカスタマイズする方法

CSS


こんにちは!フォトグラファー&Web制作のじゅんぺい(@junpei_sugiyama)です!

今回は、

スクロールバーのデザインって変えられないの?

 

 

といった方に対する記事となります。

デフォルトのデザインではイマイチ気に入らないと思う方も少なくないと思います。

今回はこのスクロールバーのデザインをカスタマイズする方法について解説したいと思います。

 


今回の記事で使えるブラウザはwebkit系のみ

 

本題に入る前に、今回ご紹介する方法はwebkit系のブラウザでしか使えません。

webkit系とはChromeSafariの事です。

逆に使えないブラウザはIEFirefoxになります。

 

CSSプロパティ「::-webkit-scrollbar」を使う

 

それでは本題に入りますが、その前にスクロールバーの表示方法が分からないという人は以下の記事を参照下さい。

 

 

それでは ::-webkit-scrollbar を使ってスクロールバーをカスタマイズしていきますが、この ::-webkit-scrollbar にはいくつか種類があります。

::-webkit-scrollbar スクロールバーの幅と高さを指定
::-webkit-scrollbar-thumb スクロールバーの移動する部分
::-webkit-scrollbar-track スクロールバーの背景
::-webkit-scrollbar-button Windowsでのバーの上下に表示されるクリックすると少しスクロール出来るボタン(上下の矢印)
::-webkit-scrollbar-track-piece track部分となり、thumbの上下にあるエリア。trackと両方background-colorが設定されていた場合はこちらが優先される。
::-webkit-scrollbar-corner 縦のスクロールバーと横のスクロールバーの間にある右下のエリア。縦横両方のスクロールバーが表示されていないと表示されない。

基本的には最初の3つだけで十分なカスタマイズが出来るので、今回はその3つを使ってカスタマイズしてみます。

 

::-webkit-scrollbar

 

::-webkit-scrollbarはスクロールバーの幅と高さを設定出来ます。

幅は縦スクロールの幅、高さは横スクロールの高さになります。

それぞれ設定する前の状態を見てみたいと思います。

ここでは横スクロールも確認するため、white-space: nowrap; にして改行させないようにしています(スマホで見る場合はResultをタップして下さい)

See the Pen
スクロールバー(デフォルト)
by junpei (@junpei-sugiyama)
on CodePen.

 

それではここで ::-webkit-scrollbar を設定してみたいと思います。

今回は幅を40px、高さを20pxにしてみました。

See the Pen
スクロールバー(webkit-scrollbarのみ)
by junpei (@junpei-sugiyama)
on CodePen.

・・・幅と高さが変わったのは分かると思いますが、他の項目を設定していないので真っ白です。

それではこのまま他の項目を設定していきたいと思います。

 

::-webkit-scrollbar-thumb

 

::-webkit-scrollbar-thumbはスクロールバーの移動する部分になります。

早速これをカスタマイズしたものを見てみます。

See the Pen
スクロールバー(webkit-scrollbar-thumb)
by junpei (@junpei-sugiyama)
on CodePen.

 

・・・気持ち悪いスクロールバーになってしまいましたね。

ここで設定したのは以下の項目です。

  • background(背景色をグラデーション)
  • border-radius(角を丸くする)

 

もちろんグラデーションにしないで角を丸めないようにも出来ますし、box-shadowで影を付けることも出来ます。

また縦スクロールバーの高さや横スクロールバーの幅は、ボックスのサイズやテキストの長さなど、中身によっても変わります。

 

::-webkit-scrollbar-track

 

あとはスクロールバーの背景色を変えます。

See the Pen
スクロールバー(webkit-scrollbar-track)
by junpei (@junpei-sugiyama)
on CodePen.

 

・・・なんだかトロピカルな色になりました。

ここも先ほど同じく背景色と角を丸めてみました。

 

ここで気になるのは右下の白いエリアです。

ここは ::-webkit-scrollbar-corner で背景色を設定すればその色になります。

 

あと ::-webkit-scrollbar-track で角を丸めた分、隙間に白い部分が見えています。

この部分は ::-webkit-scrollbar-track-piece で背景色を設定すれば色が変わりますが、::-webkit-scrollbar-track で設定した色を上書きされてしまうので注意しましょう。

 


整える

 

最後にこの気持ち悪いスクロールバーを自然な感じにしておきます。

See the Pen
スクロールバー完成
by junpei (@junpei-sugiyama)
on CodePen.


このブログのテーマカラーに寄せたグラデーションにしてみましたが・・・それでもちょっと目立ちますね。

スクロールバーのカスタマイズは控えめにするのが良さそうですね。

以上です。