即elementUI的滚动条,官网文档的组件中并没有给出,但是在源码中存在这个组件。具体使用其实可以看源码,或者百度搜搜看,我把自己使用的一些罗列下:

父元素高度固定的情况下:

<template>
  <div style="height:600px;">//父元素高度固定
    <el-scrollbar style="height:100%">
        <div>
         {{content}}
        </div>
    </el-scrollbar>
  </div>
</template>

父元素高度由子元素撑开的情况下(高度不固定,常用)

<template>
        <div style='height:100%'>
            <el-scrollbar class='scroll'>
                <div class="child></div> //子元素有高度,把父元素撑开
            </el-scrollbar>
        </div>
</template>
<style>
.scroll{
    height: 100%;
}
.scroll .el-scrollbar__wrap {
    overflow-x: auto;
}
</style>

简单说第二种情况,就是子元素撑开父元素,让父元素有高度

  • el-scrollbar 需要配合css使用,它的父元素(外层容器) 必须要有高度(固定/非固定)
  • 并且要设置el-scrollbar 的高度为100%

属性

native: boolean 是否使用本地,设为true则不会启用element-ui自定义的滚动条
wrapStyle: {}包裹层自定义样式
wrapClass:{}包裹层自定义样式类
viewClass:{}可滚动部分自定义样式类
viewStyle:{}可滚动部分自定义样式
noresize: Boolean如果 container 尺寸不会发生变化,最好设置它可以优化性能
tag: {
type: String,
default: 'div' }
生成的标签类型,默认使用 `div`标签包裹

爬。