对于elementui里面的scrollbar组件，一直没有一个清晰的使用方法，似乎每次使用需要的代码都不同，需要加各种乱七八糟的样式加穿透样式，今天自己测试了下，似乎并没有想象的复杂。
1.最简单的使用
|
1 2 3 4 5 6 7 8 9 10 11 |
<template> <div> <el-scrollbar> <div class="box"> <ul> <li v-for="item in 100">{{ item }}</li> </ul> </div> </el-scrollbar> </div> </template> |
直接使用el-scrollbar的组件将你需要的有滚动条的内容包裹起来即可。这里必须设置里面盒子的固定高度（最好是设置最大高度），不然不会有效果！若内容长度不超出屏幕宽度，则不会出现横向滚动条。
|
1 2 3 |
.box { max-height: 200px; } |
效果展示
2.设置宽度
我们也可以直接设置el-scrollbar的组件宽度，这样超出宽度的时候自然就会出现横向滚动条。
注意是给el-scrollbar组件设置宽度，而不是里面的内容设置。
此时可以直接给el-scrollbar组件添加class即可
|
1 2 3 4 5 6 7 8 9 10 11 |
<template> <div> <el-scrollbar class="scrollbar"> <div class="box"> <ul> <li v-for="item in 100">{{ item }}{{ item }}{{ item }}{{ item }}{{ item }}{{ item }}{{ item }}{{ item }}{{ item }}{{ item }}{{ item }}{{ item }}{{ item }}{{ item }}{{ item }}{{ item }}{{ item }}{{ item }}{{ item }}{{ item }}</li> </ul> </div> </el-scrollbar> </div> </template> |
|
1 2 3 4 5 6 |
.box { max-height: 200px; } .scrollbar { width: 200px; } |
当宽度超出长度但是还不想显示滚动条时，添加以下样式即可
|
1 2 3 |
/deep/ .is-horizontal { display: none; } |
