今回はスクロールバーをサイトのデザインに合わせてカスタマイズする方法を紹介していきます！この方法はCSSのみで実装することが出来るので、動作が重くなったり、コードがグチャグチャになりづらいのが嬉しいですね！

どんなことが出来るの？

まず最初に、どんなことが出来るのかを紹介します！

See the Pen VwZeqqO by カノト (@kanoto) on CodePen.

なかなかイケてると思うんですけど、どうですかね！？

WindowsやMacのデフォルトのスクロールバーよりも全然、イケてますよね！？

ただ、残念なことに、これを実装するためには「-webkit-系」つまり、Google ChromeとSafariしか使えないのが難点・・・。

EdgeやFirefoxでは使えないのでご注意ください。

CSSに記述するのは３つだけ！

実装する際に、使用するプロパティを紹介します！

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

たったのこれだけでスクロールバーのデザインをカスタマイズすることが出来ます。

ベンダープレフィックスの頭にコロンが２つ付いているのにお気づきでしょうか？

これは疑似要素扱いのようなのでコロンは２つ付けるようにします。

実際に実装してみよう！

それでは実際に、スクロールをカスタマイズしていきます。

今回の目標は上記で紹介した形までやりたいとおもいます。

See the Pen VwZeqqO by カノト (@kanoto) on CodePen.

スクロールさせる要素の準備

まず初めに、スクロールバーの表示確認用の箱を用意します！

#scroll_box {
  width: 300px;
  height: 200px;
  overflow: scroll;
  white-space: nowrap;
}

今回はこの「#scroll_box」というIDに対してスクロールバーをカスタマイズしていきます。

「-webkit-scrollbar」でスクロールバーの幅を指定

「-webkit-scrollbar」ではスクロールバーの横幅と高さを決めていきます。

一応、後述する２つのプロパティでも指定はできるのですが、メンテナンス性を担保するために、このプロパティに指定します。

/* スクロールの幅の指定 */
#scroll_box::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

今回の例では、幅を10pxにしてみました。

ここで、注意したいのが、「width」のみを設定した場合です。

「width」のみを設定すると横のスクロールバーが太くなってしまいます。

なので、しっかりと「width」と「height」を設定してあげましょう！

「-webkit-scrollbar-track」でスクロールバーの背景色を指定

次は、「-webkit-scrollbar-track」を使ってスクロールバーの背景を決めてあげます！

画像で言うと、赤枠の部分ですね！

/* スクロールの背景の設定 */
#scroll_box::-webkit-scrollbar-track {
  border-radius: 5px;
  box-shadow: 0 0 4px #aaa inset;
}

今回は角丸と内側にシャドウを付けてみました！

もちろん、ここは「background」で単色の背景にしてもオッケーです。

「-webkit-scrollbar-thumb」でスクロールバーのつまみ部分を指定

最後に「-webkit-scrollbar-thumb」でスクロールバーのつまみ部分を決めていきます。

画像の青枠部分ですね！

/* スクロールのつまみ部分の設定 */
#scroll_box::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: #1959A8;
}

こちらでは角丸と青背景を設定しています！

「-webkit-scrollbar-thumb」は自分がページのどの位置にいるかの目印になるので目立つ色が良いですね！

もし、みなさんのサイトにプライマリーカラーがあれば、その色を設定してあげると統一性があるキレイなデザインになると思います！！

ページ全体のスクロールバーに反映させるには？

サイトによっては、「ページ全体のスクロールバーを変えたい！！」って人もいると思います。

ページ全体のスクロールバーに反映させるためには以下のように記述します。

/* スクロールの幅の設定 */
html::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

/* スクロールの背景の設定 */
html::-webkit-scrollbar-track {
  border-radius: 5px;
  box-shadow: 0 0 4px #aaa inset;
}

/* スクロールのつまみ部分の設定 */
html::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: #1959A8;
}

先ほど、「#scroll_box」にしていたものを「html」に変えるだけですね。

また、「全ての要素に適用させたい！！」という場合は以下のように記述します。

/* スクロールの幅の設定 */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

/* スクロールの背景の設定 */
::-webkit-scrollbar-track {
  border-radius: 5px;
  box-shadow: 0 0 4px #aaa inset;
}

/* スクロールのつまみ部分の設定 */
::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: #1959A8;
}

IDもクラスもセレクタも指定しない。
ただ、これだけです！！簡単ですね。

グラデーションなんかも使える

最後に蛇足（笑）

グラデーションを使って奇抜にしてみましたｗｗｗ

See the Pen イケてるスクロールバー（奇抜系） by カノト (@kanoto) on CodePen.

というわけで、みなさんもぜひスクロールバーをカスタマイズして、イケてるサイトを作ってくださいね～

最後までありがとうございました！！！