webkit系ブラウザのSafariとChromeは、CSSプロパティの::-webkit-scrollbarでスクロールバーの見た目をカスタマイズできます。
デモページはこちら

ただしwebkit系ブラウザではないfirefoxやIEには適用されません。

scssでサイト全体に適用する場合は以下のように記述します。

::-webkit-scrollbar {
  //縦スクロールに適用
  width: 6px;
  //横スクロールに適用
  height: 6px;

  //ドラッグ可能なスクロールハンドル部分
  &-track {
    border-radius: 3px;
    background: #d3d3d3;
  }

  //スクロールバーの背景
  &-thumb {
    border-radius: 3px;
    background: #6c6c6c;
  }
}

特定のクラスに適用する場合は以下のように記述します。

.box::-webkit-scrollbar {
  width: 6px;
  height: 6px;

  &-track {
    border-radius: 3px;
    background: #d3d3d3;
  }

  &-thumb {
    border-radius: 3px;
    background: #6c6c6c;
  }
}