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;
}
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了echarts3如何清空上一次加载的series数据，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
vue从后端获取到文件的 url 地址及前端根据 url 地址下载文件的实现思路
这篇文章主要介绍了vue 中从后端获取到文件的 url 地址及前端根据 url 地址下载文件,项目用的是 vben admin 框架,用的是 vue3 + TS,后端返回的是文件的 url 地址,对vue后端获取 url 地址的相关知识感兴趣的朋友一起看看吧2024-02-02
Vue 自定义指令提供了强大的生命周期钩子,让你可以精准控制指令在 DOM 元素上的行为,本文将深入解析所有钩子函数,并提供丰富的实用示例,感兴趣的小伙伴可以了解下2026-01-01
这篇文章主要介绍了VUE中CSS样式穿透问题，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-09-09
这篇文章主要为大家详细介绍了vue2如何使用wangeditor实现手写输入功能,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以了解下2023-12-12
这篇文章主要给大家介绍了关于Vue3使用src动态引入本地图片的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2022-12-12
el-table表格点击该行任意位置时也勾选上其前面的复选框
本文主要介绍了在el-table组件中实现双击表格某一行任意位置自动勾选复选框的功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2025-02-02
这篇文章主要介绍了vue + element-ui的分页问题实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
今天小编就为大家分享一篇解决vue中虚拟dom,无法实时更新的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
在前端开发中,表单是非常常见的交互元素,然而,当表单的结构和字段需要根据不同的业务场景动态变化时,手动编写每个表单的代码会变得非常繁琐,所以我们可以使用Vue实现一个动态表单生成器,本文将详细介绍实现动态表单生成器的原理,需要的朋友可以参考下2025-04-04
最新评论