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