浏览器PC端自定义滚动条样式-vue-bar

解决浏览器自定义滚动条样式

使用vue-bar插件来解决pc端自定义滚动条：
http://github.serafin.io/vuebar/

• NPM
  npm install vuebar –save
• 在[main.js]中引入使用插件
  import Vuebar from ‘vuebar’;
  Vue.use(Vuebar);
• 在.vue文件中如何使用
• <div v-bar="{
preventParentScroll: true,
scrollThrottle: 30,
}"> <!-- el1 -->
<div> <!-- el2 -->
<!-- your scrollable content -->
</div>
<!-- dragger will be automatically added here -->
</div>
• 在.vue文件中还需添加滚动条样式才生效

.vb > .vb-dragger {
    z-index: 5;
    width: 12px;
    right: 0;
}

.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(48, 121, 244,.1);
    margin: 5px 5px 5px 0;
    border-radius: 20px;
    height: calc(100% - 10px);
    display: block;
}

.vb.vb-scrolling-phantom > .vb-dragger > .vb-dragger-styler {
    background-color: rgba(48, 121, 244,.3);
}

.vb > .vb-dragger:hover > .vb-dragger-styler {
    background-color: rgba(48, 121, 244,.5);
    margin: 0px;
    height: 100%;
}

.vb.vb-dragging > .vb-dragger > .vb-dragger-styler {
    background-color: rgba(48, 121, 244,.5);
    margin: 0px;
    height: 100%;
}

.vb.vb-dragging-phantom > .vb-dragger > .vb-dragger-styler {
    background-color: rgba(48, 121, 244,.5);
}

• 使用注意！important
  里层的div-el2是内容区，需要设定固定高度，且内容高度大于div高度才会出滚动条 。外层是滚动条，可以通过上方的css修改滚动条样式
• 相关配置项
  暂无