本文记录了在Vue项目中封装Element UI滚动条组件时遇到的问题及解决方案。通过引入组件并设置高度，实现Element官方滚动条效果。但默认情况下，横向滚动条会占据空间，可通过设置CSS类来隐藏。在Vue组件中应用时，需要注意属性的添加方式，可能需要借助操作符.来处理。在具体项目中，根据需求调整滚动条方向和边距，以达到理想的页面效果。
前言
最近进行 Element UI 组件封装，在之前的项目中经常用到 el-scrollbar 这个内置组件，这次单独封装时遇到点写法上的小问题，做个记录和分享，希望能帮到相关的开发者。
使用 el-scrollbar
el-scrollbar 在 Element 组件官方文档中没有，在 node_modules 中可以看到，目录位置 node_modules/element-ui/packages/scrollbar
在 Vue 页面中直接引入 el-scrollbar 标签，定义对应的高度就可以实现 element 官方的滚动条效果
<el-scrollbar style="height: 100px;">
<div style="height: 200px;">
...
</div>
</el-scrollbar>
这时候，默认效果的纵向滚动条有了，但是横向会出现浏览器默认的滚动条占位，如下效果
默认的横向滚动条隐藏可以设置 el-scrollba
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
