Vuebar滚动条

原生滚动条会产生一些问题，比如一个表格出现滚动条后会引起下面对不齐的情况

因此就需要优化滚动条。正好下面的插件可以解决这个问题。

vue2.x中使用
1、npm install vuebar --save
2、main.js

import Vuebar from 'vuebar';
Vue.use(Vuebar);

3、app.vue里面对滚动条样式进行修改

<style>
#app {
   
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.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(204, 204, 204,.5);
    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: rgb(204, 204, 204);
}

.vb > .vb-dragger:hover > .vb-dragger-styler {
   
    background-color: rgb(204, 204, 204);
    margin: 0px;
    height: 100%;
}

.vb.vb-dragging > .vb-dragger > .vb-dragger-styler {
   
    background-color: rgb(204, 204, 204);
    margin: 0px;
    height: 100%;
}

.vb.vb-dragging-phantom > .vb