Webページでスクロールバーをカスタマイズしたいと思う時がありますよね。
CSSで簡単にカスタマイズする方法があります。

-wevkit-scrollbar でカスタマイズできる

-webkit-scrollbar-webkit-scrollbar というCSSプロパティを指定することで、スクロールバーのデザインをカスタマイズできます。
実際に使うプロパティは

• -webkit-scrollbar
• -webkit-scrollbar-track
• -webkit-scrollbar-thumb

の3つだけです。

カスタマイズ例

縦にスクロールするスクロールバーをカスタマイズした例です。

  /*スクロールバー全体*/
  ::-webkit-scrollbar {
    height: 0;
    width: 7px;
    padding-right: 3px;
  }

  /*スクロールバーの軌道*/
  ::-webkit-scrollbar-track {
    border-radius: 7px;
    box-shadow: inset 0 0 6px ccc;
  }

  /*スクロールバーの動く部分*/
  ::-webkit-scrollbar-thumb {
    background-color: #aaa;
    border-radius: 10px;
  }

これだけです。簡単ですね。
横のスクロールバーをつけたい場合、 height:0; を height:7px; とか適当な高さに変更することで表示できます。

しかし、残念ながら Edge や IE11 は対象外です。