Webkit限定でスクロールバーをカスタマイズする

サンプルはこちら（ChromeかSafariで見てください）

See the Pen Custom scroll bar by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.

Webkit系ブラウザ限定でスクロールバーをカスタマイズできます。

IEもまた独自拡張でスクロールバーをカスタマイズできますが、そちらは色のみでこちらはサイズから表示・非表示までCSSで自由に制御できます。

CSS

// スクロールバー全体
.scrollbox::-webkit-scrollbar {
  width:10px;
  background:#eee;
}
// 横スクロールバー全体
.scrollbox::-webkit-scrollbar:horizontal {
  height:10px;
}
// スクロールバー上下左右末端のボタン
.scrollbox::-webkit-scrollbar-button {
  width:10px;
  height:10px;
  background:#666;
}
// ドラッグするツマミ部分
.scrollbox::-webkit-scrollbar-thumb {
  background:#999;
}
// 右下角部分
.scrollbox::-webkit-scrollbar-corner {
  background:#ddd;
}

スクロールバー上下のボタンなど不要と思った箇所は「display:none」で消すこともできます。