PC端滚动条可自定义样式

http://github.serafin.io/vuebar/
/*NPM*/
npm install vuebar –save
/*在[main.js]中引入使用插件*/
import Vuebar from ‘vuebar’;
Vue.use(Vuebar);
/*vue html*/
<div v-bar="{preventParentScroll: true,scrollThrottle: 30,}"> 
    <div>
    <!-- your scrollable content需要有固定高度 并且大于v-bar 才显示滚动条-->
    </div>

</div>

<div v-bar="{preventParentScroll: true, scrollThrottle: 30,}">
    <div class="tab-con">
        <div class="line"></div> <!--固定的滚动条背景线-->
        <!--我的赛事-->
        <div v-show="msg===0">
        </div>
    </div>
</div>

.tab-con{
  height: 690px !important;
}
.line{
  width: 12px;
  height: 100vh;
  background: #F2F2F2;
  border-radius: 3px;
  float: right;
}
/deep/ .vb > .vb-dragger {
    z-index: 5;
    width: 12px;
    right: 0;
}

/deep/ .vb > .vb-dragger > .vb-dragger-styler {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: rotate3d(0,0,0,0);
    transform: rotate3d(0,0,0,0);
    -webkit-transition:
        background-color 100ms ease-out,
        margin 100ms ease-out,
        height 100ms ease-out;
    transition:
        background-color 100ms ease-out,
        margin 100ms ease-out,
        height 100ms ease-out;
    background-color: rgba(164, 189, 246);
    margin: 5px 0 5px 0;
    border-radius: 20px;
    height: calc(100% - 10px);
    display: block;
}

/deep/ .vb.vb-scrolling-phantom > .vb-dragger > .vb-dragger-styler {
    background-color: rgba(164, 189, 246);
}

/deep/ .vb > .vb-dragger:hover > .vb-dragger-styler {
    background-color: rgba(115, 149, 228);
    margin: 0px;
    height: 100%;
}