css: ブラウザで表示されるスクロールバーを丸みのついたいい感じのデザインにしたい

• モチベーション
• ブラウザに表示されるスクロールバーの見た目変更方法
  • ちなみに

モチベーション

Windowsだと、ChromeなどのWebブラウザにおいてデフォルトで表示されるスクロールバーの見た目があまりよろしくないので、変更したい。
Windowsだとなぜかデフォルトのスクロールバーがとてつもなくレガシーな見た目をしているので、現代的な形にアレンジしたかった。

ブラウザに表示されるスクロールバーの見た目変更方法

CSSファイルに ::-webkit-scrollbar や ::-webkit-scrollbar-thumb といった記述を入れることでスクロールバーの見た目を変更することができます。

注： 本設定は Webkit をベースとしたブラウザでのみ有効です。大抵のブラウザは対応しているようですが、Firefoxなど一部は対応していないようです。

/* スクロールバーの幅や高さを狭くしています */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

/* スクロールバーのつまみの色変更、および角を丸くしています。 */
::-webkit-scrollbar-thumb {
  background: lightgrey;
  border-radius: 5px;
}

上記設定でこんな見た目になります。

スクロールバーの背景色も消えてしまう(というより背景色と同色になる？)ので、そこを復活させたい場合は ::-webkit-scrollbar-track により色を指定します。

/* スクロールバーが通る場所を色付け */
::-webkit-scrollbar-track{
  background: aliceblue;
}

ちなみに

CSSで指定する際に body とかをつけてあげないと、ページ全体のスクロールバーのスタイルにも影響してしまします。

影響範囲を限定したい場合には、

body ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

body ::-webkit-scrollbar-thumb {
  background: lightgrey;
  border-radius: 5px;
}

などとすると良いでしょう。