这篇文章主要介绍了组件el-scrollbar的使用示例详解,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
对于elementui里面的scrollbar组件，一直没有一个清晰的使用方法，似乎每次使用需要的代码都不同，需要加各种乱七八糟的样式加穿透样式，今天自己测试了下，似乎并没有想象的复杂。
1.最简单的使用
- {{ item }}
直接使用el-scrollbar的组件将你需要的有滚动条的内容包裹起来即可。这里必须设置里面盒子的固定高度（最好是设置最大高度），不然不会有效果！若内容长度不超出屏幕宽度，则不会出现横向滚动条。
.box { max-height: 200px; }效果展示
2.设置宽度
我们也可以直接设置el-scrollbar的组件宽度，这样超出宽度的时候自然就会出现横向滚动条。
注意是给
el-scrollbar组件设置宽度，而不是里面的内容设置。
此时可以直接给el-scrollbar组件添加class即可
- {{ item }}{{ item }}{{ item }}{{ item }}{{ item }}{{ item }}{{ item }}{{ item }}{{ item }}{{ item }}{{ item }}{{ item }}{{ item }}{{ item }}{{ item }}{{ item }}{{ item }}{{ item }}{{ item }}{{ item }}
.box { max-height: 200px; } .scrollbar { width: 200px; }
当宽度超出长度但是还不想显示滚动条时，添加以下样式即可
/deep/ .is-horizontal { display: none; }到此这篇关于组件el-scrollbar的使用的文章就介绍到这了,更多相关组件el-scrollbar使用内容请搜索0133技术站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持0133技术站！
以上就是组件el-scrollbar的使用示例详解的详细内容，更多请关注0133技术站其它相关文章！
