elementui組件—— el-scroll的使用

項目開發中使用到了elementui組件，後期發現瀏覽器中的滾動條不僅佔寬，還與頁面暗色風格不搭配。於是打算尋找一款插件使用，而elementui中的scroll組件剛好滿足需要而且兼容ie10+。

官網側邊欄中scroll的使用截圖

使用方法

直接在頁面中調用el-scroll組件

<el-scrollbar style="height: 325px;width: 300px;">
      <!-- 具體要包裹的內容 --> 
      <div style="
		    width: 500px;
		    height: 370px;
		    line-height: 300px;
		    text-align: center;
		"> 佔位</div>
</el-scrollbar>

頁面內渲染出的dom結構可以看出，組件內總共有三塊內容

1. 最外層：el-scrollbar。使用時需要指定高度和寬度
2. 第一塊代碼：el-scroll__wrap：
   1).overflow:scroll是寫在這裏的，通過margin爲負，將瀏覽器中的原始滾動條排除視覺內隱藏掉。
   2).el-scroll__view包裹滾動區域
3. 第二塊代碼：el-scroll__bar is-horizontal: 橫向滾動條
4. 第三塊代碼：el-scroll__bar is-vertical: 縱向滾動條

組件的自定義屬性

根據官網的scroll組件源碼，可以看到scroll組件是有幾個屬性可以傳入的。具體使用可以自己研究下，主要就是傳入自定義樣式和class，注意自定義stlye接收的是數組類型。

舉栗子：

 <el-scroll
  :view-class="'the-view-class'" 
  :wrap-style="[{height:'300px'},{width:'300px'}]"
  :wrap-class="'the-wrap-class'">
 </el-scroll>