浏览器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修改滚动条样式
• 相关配置项
  暂无