CSSでスクロールバーのデザインをカスタムする

デザインを変更する

.scroll-areaをスクロールバーが出る要素とした場合の例です。
基本的には::-webkit-scrollbar、::-webkit-scrollbar-track、::-webkit-scrollbar-thumbで設定できますが、Firefoxは対応していないためFirefox用のみ別で指定しています。

/* スクロールバーが出る要素 */
.scroll-area{
  overflow: scroll;
}

.scroll-area::-webkit-scrollbar{
  width: 16px; /* 縦スクロール時の幅 */
  height: 16px; /* 横スクロール時の幅 */
}

/* スクロールバーの背景 */
.scroll-area::-webkit-scrollbar-track{
  background-color: #ccc;
}

/* スクロールバーのつまみ */
.scroll-area::-webkit-scrollbar-thumb{
  background-color: #333;
  border-radius: 16px;
}

/* Firefox用 */
@-moz-document url-prefix() {
  .scroll-area{
    scrollbar-width: thin; /* auto, thin, none */
    scrollbar-color: #333 #ccc; /* つまみの色 背景色 */
  }
}

::-webkit-scrollbar

疑似要素でスクロールバーの幅を指定します。widthで縦スクロール時の幅、heightで横スクロール時の幅を指定します。

::-webkit-scrollbar-track

疑似要素でスクロールバーの背景部分のスタイルを指定します。background-colorで色を、border-radiusで角丸を調整できます。

::-webkit-scrollbar-thumb

疑似要素でスクロールバーの移動する部分（つまみ）のスタイルを指定します。background-colorで色を、border-radiusで角丸を調整できます。また:hover擬似クラスでホバー時の色も設定できます。

scrollbar-width

基本的には標準のautoと細くするthinの2択です。-webkit-ベンダープレフィックスを使用する方法と違ってスクロールバーの幅をピクセル単位で変更することはできません。

scrollbar-color

1つ目の値にスクロールバーの移動する部分（つまみ）の色を指定、2つ目の値にスクロールバーの背景色を指定します。

スクロールバーを非表示にする

スクロールできる機能は維持したまま、見た目だけスクロールバーを非表示にする方法です。

.scroll-area{
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scroll-area::-webkit-scrollbar{
  display: none;
}