CSSでスクロールバーをイイ感じにカスタマイズする

結論

::-webkit-scrollbar {
  width: 16px;                // スクロールバー全体の幅
  background-color: #f9f9f9;  // スクロールバーの背景色
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;                      // スクロールバーの丸み
  box-shadow: inset 0 0 10px 10px #909090;  // スクロールバーの色
  border: solid 4px transparent;            // スクロールバーの左右の余白
}

説明

Youtubeで使われているこういうちょっと見た目の良いスクロールバー。

一部に適用したければ適当にclassとか指定してください。

textarea::-webkit-scrollbar {
  ...
}

textarea::-webkit-scrollbar-thumb {
  ...
}

.menu::-webkit-scrollbar {
  ...
}

.menu::-webkit-scrollbar-thumb {
  ...
}

注意

https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar
chrome・Edge・operaなどは対応してるけど、対応していないブラウザもあります。
Firefoxが対応してないのは残念…。
対応してない場合は標準の見た目になるのでとりあえず設定しておいて良さそうですが。