Web制作

CSSだけでスクロールバーを変更しよう！

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

しかし、今回紹介する方法は「-webkit-系」で構築します。つまり、Google ChromeとSafariしか使えないという悲しい欠点が・・・。
EdgeやFirefoxでは使えないのでご注意ください。

1 CSSに記述するのは３つだけ！
2 サンプルコード
3 ページ全体のスクロールバーに反映させるには？
4 まとめ

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

実装する際に、使用するプロパティ以下のものになります。

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

たったのこれだけでスクロールバーのデザインをカスタマイズすることが出来ます。
これは疑似要素扱いのようなのでコロンは２つ付けるようにします。

サンプルコード

それでは、スクロールをカスタマイズするサンプルコードをご紹介します。

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

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

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

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

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

サイトによっては、「ページ全体のスクロールバーを変えたい！！」って人もいると思います。
ページ全体のスクロールバーに反映させるためには以下のように記述します。

/* スクロールの幅の設定 */
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もクラスもセレクタも指定しない。
ただ、これだけです！！簡単ですね。