CSSでスクロールバーのデザインをカスタマイズする方法 -webkit-scrollbarの解説

CSSを使ってスクロールバーをかっこいいオリジナルのデザインにしたい時ってありますよね。しかしブラウザデフォルトのスクロールバーはデザインがとてもダサいです。

今回はスクロールバーをCSSでカスタマイズする方法について説明します。

スクロールバーをかっこいいデザインにできるCSS「-webkit-scrollbar」

「-webkit-scrollbar」というプロパティを使うと、スクロールバーをブラウザデフォルトのデザインより、かっこよく装飾することができます。実際に実装したデモをご覧ください。

See the Pen [-webkit-scrollbar]CSSでスクロールバーのデザインをカスタマイズする方法 by tak-kun (@tak-kun) on CodePen.

まずスクロールバーを表示させるためには、スクロールバーを表示させたい親要素にheightを指定して高さを設定します。さらに「overflow:auto」または「overflow-y: scroll」を指定すれば、設定したheightの高さよりコンテンツ量がはみ出た場合に、スクロールバーが出現します。

-webkit-scrollbarの解説

-webkit-scrollbarの簡単な解説をします。-webkit-scrollbarはスクロールバーのデザインを変更することができるプロパティです。

主に使うプロパティは、スクロールバーの幅を設定する「::-webkit-scrollbar」プロパティ、スクロールバーのレール部分を設定する「::-webkit-scrollbar-track」プロパティ、スクロールバーのつまみ部分を設定する「::-webkit-scrollbar-thumb」プロパティの3つです。

/*スクロールバーの幅*/
::-webkit-scrollbar {
  width: 6px;
}
/*スクロールバーのレール*/
::-webkit-scrollbar-track {
  border-radius: 30px;
  background: #eee;
}
/*スクロールバーのつまみ*/
::-webkit-scrollbar-thumb {
  border-radius: 30px;
  background: #81D4FA;
}