element-ui滾動條元件

Near_Li發表於2018-09-13
UI元件

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>

相關文章