vue+elementUI中的滚动条el-scrollbar使用及说明
更新时间：2026年02月10日 09:09:09 作者：是日前端
文章介绍了如何在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;
}
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要给大家介绍了关于vue项目main.js使用方法的相关资料,main.js文件是程序的入口文件,加载各种公共组件,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-09-09
这篇文章主要介绍了Vue3实现获取验证码按钮倒计时效果,用户点击获取验证码按钮,发送请求给后端,按钮失效,并且开始倒计时60秒；在此期间,用户无法再次点击按钮,即使用户刷新页面,倒计时依然存在,直到倒计时完毕,按钮恢复,感兴趣的小伙伴跟着小编一起来看看吧2024-10-10
我们开发后台管理系统过程中，会由不同的人操作系统，有admin（管理员）、superAdmin(超管)，及各种运营、财务人员。为了区别这些人员，会给不同的人分配不一样的角色来展示不同的菜单，这就必须要通过动态路由来实现。下面就来介绍vue实现动态路由,需要的朋友可参考一下2021-10-10
这篇文章主要介绍了Vue中$router与 $route的区别详解，文章围绕主题展开详细的内容戒杀，具有一定的参考价值，需要的朋友可以参考一下2022-09-09
这篇文章主要介绍了Vue 解决路由过渡动画抖动问题，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2020-01-01
本文主要介绍了为什么vue中不建议使用空字符串作为className，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
这篇文章主要介绍了通过html文件来使用Vue的单文件组件形式详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
本文介绍了在Vue3项目中使用顶部导航栏和侧边栏,通过顶部导航控制侧边栏的生成,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2024-11-11
今天小编就为大家分享一篇vue初始化动画加载的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要为大家介绍了Vue.js中安装一个路由器demo，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
最新评论