element-ui滚动条组件<el-scrollbar>

最新推荐文章于 2024-09-23 12:22:55 发布

weixin_34209851

最新推荐文章于 2024-09-23 12:22:55 发布

阅读量2k

点赞数 1

文章标签： ui javascript ViewUI

原文链接：https://segmentfault.com/a/1190000016388126

版权

Element的滚动条组件el-scrollbar

在使用ElementUI框架的时候，发现它的官网左侧栏的滚动条不是系统自带的滚动条，查了一下源码发现，还真是有实现了滚动条的功能；Element的滚动条还挺好看的，简洁不突出。
示例如下：

<div style="height: 100vh;">
    <!-- 注意需要给 el-scrollbar 设置高度，判断是否滚动是看它的height判断的 -->
    <el-scrollbar style="height: 100%;"> <!-- 滚动条 -->
        <div style="height: 500px;width: 100%;background: red;"></div>
        <div style="height: 500px;width: 100%;background: yellowgreen;"></div>
        <div style="height: 500px;width: 100%;background: blueviolet;"></div>
    </el-scrollbar><!-- /滚动条 -->
</div>