Element-UI 框架 el-scrollbar 組件

前言

Element-UI 官方文檔並沒有寫到關於 el-scrollbar 的文檔，具體原因不詳, 下面整理一下關於隱藏組件 el-scrollbar的文檔說明

結構組成

 

 

縱向滾動條基礎使用

使用注意點: el-scrollbar 標簽 必須設定高度. 只有包裹內容超過給定高度, 才會出現滾動條

<el-scrollbar style="height:300px">
　　<div>....</div>
</el-scrollbar>

　　

也可以給 el-scrollbar添加 class 屬性.

<el-scrollbar class="height-p-100">
    <div>...</div>
</el-scrollbar>

 

橫向滾動條基礎使用

橫向滾動條在使用上和縱向滾動條使用的方法一樣，只需給 el-scrollbar 標簽設定寬度即可,如果包裹內容超出最大寬度就會出現橫向滾動條

<el-scrollbar style="width:200px">
　　<div>....</div>
</el-scrollbar>

 

橫向滾動條在使用的時候會有一些問題，主要表現在這幾個地方：

 

問題1: window系統下，使用橫向滾動條后標簽底部出現原生滾動條

解決方法：給 el-scrollbar 添加一個父級 div，父級 div 設定一個高度值,比如 200px，el-scrollbar 設定 200px + 17px = 217px。如果父級div 高度為 100%， 則 el-scrollbar 的高度為 height: calc( 100% + 17px )

 

<div style="height:200px">
    <el-scrollbar style="height:217px">
        <div>....</div>
    </el-scrollbar>
</div> 

 

注意事項：el-scrollbar 屬於一個底層的公共組建，在 element 的包含的組建中，好多都依賴了這個滾動條組建，所有一般不建議修改原始的CSS樣式，如果要修改，可以套一個div，讓樣式效果只作用在當前標簽內

 

詳細案例

<el-scrollbar
    wrapClass="class-name"
    viewClass="class-namt"
    wrapStyle="color:'#fff';fontSize:'16px';"
    viewStyle="color:'#fff';fontSize:'16px';"
    :native="false"
    :noresize="true"
    tag="ul"
>
    <div>...</div>
</el-scrollbar>

　　

文檔

 

參數	說明	類型	可選值	默認值
wrapClass	可選參數，容器的樣式名	string	-	-
viewClass	可選參數，展示視圖的樣式名	string	-	-
wrapStyle	可選參數，容器的樣式	string	-	-
viewStyle	可選參數，展示視圖的樣式	string	-	-
native	可選參數，是否使用原生滾動	boolean	-	false
noresize	可選參數，容器大小是否是不可變的	boolean	-	false
tag	可選參數，渲染容器的標簽	string	-	div

源碼 github.com/ElemeFE/ele…

文章 element ScrollBar滾動組件源碼深入分析