Element-UI 框架 el-scrollbar 组件

前言

咱们在 Element-UI 的其余组件里发现，有使用这个组件，而且还不错，因为 Element-UI 官方文档并无写到关于 el-scrollbar 的文档，因此稳定性上多是有些问题，这里只是爬了源码，翻译了一些属性的使用，仅供参考

快速使用

<el-scrollbar>
    <li v-for="user in userList" :key="user.id">{{user.name}}</li>
</el-scrollbar>

复制代码

具体实例

<el-scrollbar wrapClass="yf-container" viewClass="yf-content" wrapStyle="color:'#fff';fontSize:'16px';" viewStyle="color:'#fff';fontSize:'16px';" :native="false" :noresize="true" tag="ul" >
    <li v-for="user in userList" :key="user.id">{{user.name}}</li>
</el-scrollbar>

复制代码

结构构成

文档

Attribute

参数	说明	类型	可选值	默认值
wrapClass	可选参数，容器的样式名	string	-	-
viewClass	可选参数，展现视图的样式名	string	-	-
wrapStyle	可选参数，容器的样式	string	-	-
viewStyle	可选参数，展现视图的样式	string	-	-
native	可选参数，是否使用原生滚动	boolean	-	false
noresize	可选参数，容器大小是不是不可变的	boolean	-	false
tag	可选参数，渲染容器的标签	string	-	div

备注

源码 github.com/ElemeFE/ele…

文章 element ScrollBar滚动组件源码深刻分析