Home
CSS
CSSでスクロールバーのデザインを変更する方法

CSSでスクロールバーのデザインを変更する方法

公開日
2022.06.18
更新日
2022.06.19
CSSでスクロールバーのデザインを変更する方法

どうも!かけちまるです!

overflow: scroll;などを指定すると出てくるスクロールバーですが、そのままだとパッとしないデザインなのでCSSでデザインを変えてみましょう。

この記事では、

  • ・スクロールバーのデザイン変更方法
  • ・Firefoxもデザイン変更する方法
  • ・横スクロールを消す方法

がわかります。

スクロールバーのデザイン変更方法

スクロールバーのデザインを変更するには主に3つの擬似要素を使います。
次の3つで事足りると思いますが、他にもいくつかあるので調べてみてください。

擬似要素 説明
::-webkit-scrollbar スクロールバー全体にCSSを指定できる。
::-webkit-scrollbar-track スクロールバーの動かない部分にCSSを指定できる。
::-webkit-scrollbar-thumb スクロールバーの動く部分にCSSを指定できる。
擬似要素の対応図

ブラウザサポート状況

Firefoxは、紹介した疑似要素はサポートされていないです。
Firefoxもデザインを変更する方法でデザインを変える方法を解説しています。

iOS14〜はFirefoxもデザインを変更する方法で解説しているものも含めて、完全にサポートされていません。

擬似要素のサポート状況

実装サンプル

::-webkit-scrollbar-trackと::-webkit-scrollbar-thumbではそれぞれborderプロパティやborder-radiusプロパティなどを使ったりして装飾できます。やりすぎると微妙かもしれませんが色々試してみるといいかもしれません。Firefoxはサポートされていませんが、Firefoxのデザインも変更する方法もこの記事で解説しています。
HTML
コピー
<div class="scroll_bar">::-webkit-scrollbar-trackと::-webkit-scrollbar-thumbではそれぞれborderプロパティやborder-radiusプロパティなどを使ったりして装飾できます。やりすぎると微妙かもしれませんが色々試してみるといいかもしれません。Firefoxはサポートされていませんが、Firefoxのデザインも変更する方法もこの記事で解説しています。</div>
CSS
コピー
.scroll_bar{ background-color: #f0f0f0; overflow-y: scroll; width: 250px; height: 150px; } .scroll_bar::-webkit-scrollbar{ width: 10px; } .scroll_bar::-webkit-scrollbar-track{ background-color: #ccc; } .scroll_bar::-webkit-scrollbar-thumb{ background-color: #17585d; }

スクロールバー全てに共通指定したい?

上記の実装サンプルでは、特定の要素にのみCSSを適応させました。
サイト内のスクロールバー全てに同じCSSを当てるにはセレクターを指定しなければ良いです。
次のように記述します。

CSS
コピー
::-webkit-scrollbar{ width: 10px; } ::-webkit-scrollbar-track{ background-color: #ccc; } ::-webkit-scrollbar-thumb{ background-color: #17585d; }

Firefoxもデザイン変更する方法

Firefoxは、次のように記述するとスクロールバーのデザインが変更できます。

CSS
コピー
.scroll_bar{ scrollbar-width: thin; scrollbar-color: #17585d #ccc; }

しかし、なんか微妙な仕様なのでFirefoxのスクロールバーはデフォルトデザインで良いのではと思います。

微妙な点
  • ・スクロールバーの幅を変えたり細かい調整ができない
  • ・macOSはシステム環境設定 > 一般 > スクロールバーの表示を「常に表示」にしないと有効にならない

横スクロールを消す方法

スクロール要素は縦のみで良いことが多いと思います。
overflow: scroll;で指定している方は横のスクロールバーも出てしまっているかもしれません。

そのような時はoverflow-y: scroll;に変更すると縦スクロールのみ表示されるようになるでしょう。

CSS
コピー
.scroll_bar{ /* overflow: scroll; */ overflow-y: scroll; }

おわり

かけちまる
かけちまる
Webエンジニアをしています。
HTML/CSS/JavaScript/jQuery/PHPができます。
WEB制作を中心に日々学びになったこと、興味が沸いたことについて初心者の方でもわかりやすいようにアウトプットしていくブログです。
Xserver

関連記事

記事の目次にカレント表示機能を導入する😤

記事の目次にカレント表示機能を導入する😤

【GSAP】擬似要素(before・after)をアニメーションさせる方法

【GSAP】擬似要素(before・after)をアニメーションさせる方法

【CSSのみ】ボタンのホバーアニメーションまとめ

【CSSのみ】ボタンのホバーアニメーションまとめ

【PHP】配列の要素の数を取得する

【PHP】配列の要素の数を取得する

WordPressでショートコードを自作する方法

WordPressでショートコードを自作する方法

Contact form 7「サイトのドメインに属していないメールアドレスが送信元に設定されています」の理由と対処法

Contact form 7「サイトのドメインに属していないメールアドレスが送信元に設定されています」の理由と対処法