原生滚动条会产生一些问题,比如一个表格出现滚动条后会引起下面对不齐的情况
因此就需要优化滚动条。正好下面的插件可以解决这个问题。
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