elementUI自定義滾動條組件el-scrollbar

最近做項目適合發現的一個文檔沒有但是挺好用的滾動條組件

使用

// 使用
<el-scrollbar wrap-class="scrollbar-wrapper"></el-scrollbar>



// 傳入的屬性
props: {
  native: Boolean,    //  是否使用原生滾動條，即不附加自定義滾動條
  wrapStyle: {},      //  wrap的內聯樣式
  wrapClass: {},      //  wrap的樣式名
  viewClass: {},      //  view的樣式名
  viewStyle: {},      //  view的內聯樣式
  noresize: Boolean,  //  當container尺寸發生變化時，自動更新滾動條組件的狀態
  tag: {              //  組件最外層的標籤屬性，默認爲 div
    type: String,
    default: 'div'
  }

結構

使用自定義標籤 el-scrollbar 裹住使用的區域，scrollbar 組件會生成 view 和 wrap 兩個父級元素包裹插槽中的內容，還有兩種類型的自定義滾動條 horizontal 和 vertical。

最後根據自己需要設置下樣式就好

.el-scrollbar {
      height: 100%;
    }
.scrollbar-wrapper {
      overflow-x: hidden !important;
    }
  .el-scrollbar__view{
      height: 200px;
  }

鼠標移入就會顯示滾動條了