vue+elementUI中的滚动条el-scrollbar使用及说明
作者：是日前端
文章介绍了如何在Vue和ElementUI中使用`el-scrollbar`组件来替换原生滚动条,并提供了一个示例代码,同时,文章分享了隐藏横向滚动条的经验,通过调整CSS样式解决了原生滚动条显示的问题
vue+elementUI的滚动条el-scrollbar
由于需要使用滚动条，原生滚动条长的太丑，查到了elementUI中的滚动条
el-scrollbar，使用简洁方便
样式如下：
使用方法
如下所示：
外部的div必须给固定高度才行
<!-- 外部div -->
<div style="height: 650px; display: flex" class="cab" >
<el-scrollbar style="height:100%">
<!-- 内部div -->
<div></div>
</el-scrollbar>
</div>
一般根据需要可以隐藏横向滚动条，网上查的是这个，但是我用起来没生效
.el-scrollbar__wrap{
overflow-x: hidden;
}
后来自己f12倒腾出来了，我之前只用了下面这个，我自己这可以，结果别人那原生的横向滚动条也跑出来了
.cab .is-horizontal{
display: none;
}
后来又倒腾，终于隐藏了
.cab .is-horizontal{
display: none;
}
.cab .el-scrollbar__wrap {
overflow-x: hidden;
}
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。