ElementUI——＜el-scrollbar＞

ElementUI中有一个组件，但官方文档并没有显示出来，那就是el-scrollbar组件

el-scrollbar组件是一个滚动条，对一个溢出元素的内容做一个滚动条，使其内容不再溢出元素。
说白了就是：将一个元素内的东西给一个滚动条。

小编使用脚手架搭建了Vue，所以就显示部分代码

<template>
    <div class="main">//边框是 黑色
        <h1>使用滚动条组件</h1>
        <div class="father_box">//边框是 红色，必须设置 宽、高
            <el-scrollbar>//滚动条组件，必须设置高，最接近滚动内容的元素
                <li>1.该条是内容</li>
                <li>2.该条是内容</li>
                <li>3.该条是内容</li>
                <li>4.该条是内容</li>
                <li>5.该条是内容</li>
                <li>6.该条是内容</li>
                <li>7.该条是内容</li>
                <li>8.该条是内容</li>
            </el-scrollbar>
        </div>
    </div>
</template>

<style>
    li{
        list-style: none;
    }
    .main{
        width: 300px;
        border: 1px solid black;    
    }
    .father_box{
        width: 300px;//重要，滚动条的父元素必须要有宽度
        height: 100px;//重要，滚动条的父元素必须要有高度
        border: 1px solid red;
    }
    .el-scrollbar{
        height: 100%;//重要，滚动条必须设置高度
    }
</style>

效果图:

总结：
1.滚动条的父元素必须设置宽、高
2.滚动条必须设置高度，一般是100%
3.滚动条是滚动内容最近的父元素