preface
We have found that elder-UI components use this component, and it is not bad, because the official elder-UI documentation does not write about the el-Scrollbar, so there may be some stability problems, here just crawl the source code, translated some properties of use, for reference only
Quick to use
<el-scrollbar>
<li v-for="user in userList" :key="user.id">{{user.name}}</li>
</el-scrollbar>
Copy the code
Specific instance
<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>
Copy the code
structure
The document
Attribute
parameter | instructions | type | An optional value | The default value |
---|---|---|---|---|
wrapClass | Optional argument, the style name of the container | string | – | – |
viewClass | Optional argument, the style name of the display view | string | – | – |
wrapStyle | Optional argument, container style | string | – | – |
viewStyle | Optional argument that shows the style of the view | string | – | – |
native | Optional parameter, whether to use native scrolling | boolean | – | false |
noresize | Optional argument, whether the container size is immutable | boolean | – | false |
tag | Optional argument, render container label | string | – | div |
note
Source github.com/ElemeFE/ele…
Element ScrollBar source code in depth analysis