Element UI 中被隱藏的滾動條

Element UI 官網中有用到自定義的滾動條組件，但是發布的所有版本中都不曾提及，個中原因我們不得而知，不過我們還是可以拿過來引用到自己的項目中。



使用的時候，放在 <el-scrollbar></el-scrollbar> 標簽內即可
如：

<div style="height:100%">
  <el-scrollbar class="m-scroll" style="height:100%">
    <router-view/>
  </el-scrollbar>
 </div>

發現底部出現橫向滾動條，

問題大概在於 <el-scrollbar></el-scrollbar> 上的 height: 100% 與 margin-bottom 同時顯示

直接用 overflow-x:hidden  隱藏：

.el-scrollbar__wrap {
    overflow-x: hidden;
}

PS：通過閱讀源碼，可以看到暴露的幾個屬性

props: {
    native: Boolean,    // 使用原生滾動條
    wrapStyle: {},      // 包裹層
    wrapClass: {},
    viewClass: {},      // 內容層
    viewStyle: {},
    noresize: Boolean,  // 如果 container 尺寸不會發生變化，最好設置它可以優化性能
    tag: {              // 編譯后生成的標簽，默認 `div`
      type: String,
      default: 'div'
    }
  },

所以，前面的代碼可以插入這些屬性

<div style="height:100%">
  <el-scrollbar
     :native="false" 
     wrapStyle="" 
     wrapClass="" 
     viewClass="" 
     viewStyle="" 
     noresize="false" 
     tag="section">
    <router-view/>
  </el-scrollbar>
 </div>

 

最后附上官方github地址：
https://github.com/ElemeFE/element/blob/dev/packages/scrollbar/src/main.js#L14