elementUI中的隱藏組件el-scrollbar

細心的人兒都會發現elementUI官網的滾動條樣式優美，但是elementUI中並未給出這個滾動條組件，打開調試頁面發現用到了el-scrollbar。問一下度娘發現早就有前輩們發現了這個問題並給出了解決方案。下面就記錄下來用法以備不時之需。

 

1、組件名稱

<el-scrollbar></el-scrollbar>

 

2、默認樣式修改

 ⚠️ 改變.el-scrollbar__wrap這個class的樣式一定要僅改變指定想改變的滾動條，避免影響到其他組件中el-dropdown有滾動條的樣式。

// 在common.css中添加
.el-scrollbar__wrap{
  overflow-x: hidden;
}

 

3、綜合示例

 ⚠️ 在使用時要設置外層容器高度。並且要設置el-scrollbar 的高度為100%

<template>
  <div style="height:600px;">
    <el-scrollbar style="height:100%">
        <div style="width:700px;height:700px;border:solid;" >
          ....... blabla.....
        </div>
    </el-scrollbar>
  </div>
</template>

 

參考文章：https://www.cnblogs.com/xuejiangjun/p/8628158.html

源碼地址：https://github.com/ElemeFE/element/blob/dev/packages/scrollbar/src/main.js