Webサイトの制作において、しばしば見落とされがちなのがスクロールバーです。
デフォルトのスクロールバーでも機能的に問題はありませんが、サイト全体のデザインと調和しないことがあります。
しかし、CSSを活用することで、スクロールバーをサイトの雰囲気に合わせてカスタマイズし、全体に統一感のあるデザインを実現することができます。
この記事では、WEBサイト上でのスクロールバーのカスタマイズ方法をCSSを用いて紹介します。
CSSスクロールバーとは
cssスクロールバーとは、ブラウザ全体のスクロールバーではなくページ内にあるスクロールバーのカスタマイズを可能にするCSSプロパティです。
2024年4月現在、Safariでは部分的にしか対応していないので、実装の際には注意が必要です。
しかし、Chrome、Firefox、そしてEdgeといったその他の主要なブラウザでは、CSSスクロールバーが完全に実装されております。
また、スクロールバーのカスタマイズを行う際には、タッチ領域やスクロールバーの可読性など、注意しながら実装しましょう。
CSSスクロールバーの基礎
今回実装するスクロールバーのコードはこちらになります。
See the Pen CSS スクロールバー1 by 師岡崚汰 (@rxsocktt-the-scripter) on CodePen.
それでは、コード内のプロパティについて一つ一つ解説していきます。
まず最初に、今回カスタマイズする元となる、デフォルトのスクロールバーがこちらになります。
今回は縦スクロールでの実装になりますが、横スクロールでも同じように実装が可能です。
See the Pen CSS スクロールバー2 by 師岡崚汰 (@rxsocktt-the-scripter) on CodePen.
scrollbar-width
scrollbar-widthとは、スクロールバーの太さを設定することができるプロパティです。
サンプルでは、thinを使用し、デフォルトより少し細いスクロールバーを実装しています。
scrollbar-width: auto; //デフォルトのスクロールバー scrollbar-width: thin; //デフォルトよりも細い幅のスクロールバー scrollbar-width: none; //スクロールバーを表示しない
See the Pen CSS スクロールバー3 by 師岡崚汰 (@rxsocktt-the-scripter) on CodePen.
scrollbar-color
crollbar-colorとは、スクロールバーの背景とつまみのカラーを設定することができるプロパティです。
カラーを設定する場合、一つ目はスクロールバーのつまみ、二つ目は背景に適用の色を指定します。
See the Pen CSS スクロールバー1 by 師岡崚汰 (@rxsocktt-the-scripter) on CodePen.
Safariでの実装方法
先ほどSafariでは非対応の機能あると紹介しましたが、専用の記述を行うことでSafariでもスクロールバーのカスタマイズが可能となります。
しかし、こちらの機能はWeb非標準となっており、標準化の予定もありません。
また、Safari以外のブラウザで実装できるCSSスクロールバーと完全に同じ見た目にすることはできないので、実装の際には注意が必要です。
::-webkit-scrollbar
::-webkit-scrollbarとは、スクロールバー全体の編集が可能となる擬似要素です。
widthとheightを使用することで、スクロールバーの幅を設定できます。
width: 10px; //縦スクロールバーの場合の、横幅の設定が可能です。 height: 10px; //横スクロールバーの場合の、縦幅の設定が可能です。 background-color: green; //スクロールバーの背景色を設定できます。
See the Pen CSS スクロールバー4 by 師岡崚汰 (@rxsocktt-the-scripter) on CodePen.
::-webkit-scrollbar-thumb
::-webkit-scrollbar-thumbではスクロールバーのつまみの設定が可能です。
background-color: green; //スクロールバーのつまみの色を設定できます。 border-radius: 5px; //デフォルトのつまみが長方形なので、角丸に変更できます。
See the Pen CSS スクロールバー5 by 師岡崚汰 (@rxsocktt-the-scripter) on CodePen.
@supportsでのブラウザの限定方法
注意としてChromeなどの一部ブラウザでは、scrollbarと::-webkit-の両方に対応しています。
::-webkit-は非標準になりますので、scrollbarを使用して実装できるブラウザでは、そちらを優先して適応させるための記述が必要になります。
@supportsは、そのブラウザが特定の記述に対応されているかを判断し、対応していなかった場合、設定した別のコードへの切り替えを自動にで行なってくれる機能になります。
@supports not (display: grid) { //gridの使用ができないブラウザの場合、括弧の中の記述を適応。
div {
display: flex;
}
}
See the Pen Untitled by 師岡崚汰 (@rxsocktt-the-scripter) on CodePen.
以上でCSSスクロールバーの解説を終わります。
非対応のブラウザもあり、実際に実践しているWebサイトも少ない印象ですが、だからこそ他のサイトとの違いを付けられるポイントになると思います。
ぜひ、試してみてください。
