基于vue element-ui的滚动条样式修改

基于vue element-ui的滚动条样式修改

做vue项目使用Element UI组件库时 需要使用滚动条但是windows浏览器默认的滚动条太丑不美观和UI库界面不搭配需要考虑优化滚动条样式

vue Element UI官方文档上并没有放出滚动条相关的示例说明，但是实际上是有这么一个组件的

element-ui隐藏组件scrollbar的使用
使用方法如下：

使用上述标签把要出现滚动的内容放进去可以了
做下简单的配置把上述标签的height设为100%，查看效果的时候，会出现一个横向的滚动条，如果你不想要横向的滚动条，使用下面css属性设置就可以只显示竖向滚动条。
.el-scrollbar__wrap {
overflow-x: hidden;
}
这句话的意思是 只显示纵向滚动条样式，把横向滚动条隐藏

示例使用如下图：