方案一：引入第三方插件mCustomScrollbar

1. 引入第三方文件

<link href="mCustomScrollbar/css/jquery.mCustomScrollbar.min.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="mCustomScrollbar/js/jquery.mCustomScrollbar.min.js"></script>
<script type="text/javascript" src="mCustomScrollbar/js/jquery.mousewheel.min.js"></script>

2. 滚动样式设置

/*滚动条样式开始*/
.mCSB_scrollTools {
    width: 2px !important;    /*宽度*/
}

.mCSB_inside > .mCSB_container {
    margin-right: 0px !important;
}

.mCSB_scrollTools .mCSB_draggerRail {
    background-color: yellow !important;
}

.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    background-color: red !important;
    width: 2px !important;
}
/*滚动条样式结束*/

3. 展示内容区域的设置

.contList {
  width: 500px;
  margin: 20px auto;
  overflow: auto; 
  height: 300px;
  background-color: #efefef;
  text-align: center;
}

4. 初始化插件

<script type="text/javascript">
    $(function () {
      $(window).load(function () {
        $(".contList").mCustomScrollbar(); //初始化
      });
});
</script>

方案二：设置css样式

.contList {
  width: 500px;
  margin: 20px auto;
  overflow: auto; 
  height: 300px;
  background-color: #efefef;
  text-align: center;
  //自定义滚动条
  &::-webkit-scrollbar {
    width: 7px;
    @include borderRadius(10px);
  }

  &::-webkit-scrollbar-track {
    @include borderRadius(10px);
    background-color: #C1CAD2;
  }

  &::-webkit-scrollbar-thumb {
    @include borderRadius(10px);
    background-color: $subTitleColor;
  }
}