el-scroll-bar.gif
官網(wǎng)效果
無(wú)意間發(fā)現(xiàn)element官網(wǎng)有這么一個(gè)滾動(dòng)條效果陨界，之前在一個(gè)需求上想做這樣的效果，礙于當(dāng)時(shí)腦筋短路沒(méi)實(shí)現(xiàn)幌氮。感覺(jué)像是通過(guò)active或者focus觸發(fā)顯示滾動(dòng)條眷蜓，查看html后發(fā)現(xiàn)確實(shí)是通過(guò)active出觸發(fā)。且它這樣式很規(guī)整想鹰，就懷疑是不是有寫(xiě)好的組件紊婉。
查看了element代碼后發(fā)現(xiàn)確實(shí)有這么個(gè)組件，只是沒(méi)有在官網(wǎng)API上聲明辑舷，目前發(fā)現(xiàn)只是在el-select下拉框中內(nèi)部使用喻犁。
簡(jiǎn)單分享下該組件用法和參數(shù)
基礎(chǔ)用法
<el-scrollbar style="height:100px;" :wrapStyle="[{'overflow-x':'hidden'}]">
...內(nèi)容...
</el-scrollbar>
使用該組件的時(shí)候需要給其一個(gè)高度，它畢竟是滾動(dòng)條組件，高度是對(duì)它最起碼的尊重肢础。組件默認(rèn)overflow為：scroll还栓，如果需要去掉橫向滾動(dòng)條可以設(shè)置overflow-x樣式。
Attribute
| 參數(shù) | 說(shuō)明 | 類型 | 可選值 | 默認(rèn)值 |
|---|---|---|---|---|
| native | 是否使用原生滾動(dòng)條樣式 | boolean | — | false |
| wrapStyle | wrap層style | Array/String | — | — |
| wrapClass | wrap層class | String | — | — |
| viewStyle | view層style | Array/String | — | — |
| viewClass | view層class | String | — | — |
| noresize | 是否添加resize監(jiān)聽(tīng) | boolean | — | false |
| tag | view層html標(biāo)簽 | String | — | div |
html
<div class="el-scrollbar" style="height: 100px;">
<div class="el-scrollbar__wrap" style="margin-bottom: -17px; margin-right: -17px;">
<div class="el-scrollbar__view">
...內(nèi)容...
</div>
</div>
<!-- element垂直滾動(dòng)條 native 為 true 時(shí)不出現(xiàn) -->
<div class="el-scrollbar__bar is-horizontal">
<div class="el-scrollbar__thumb" style="transform: translateX(0%);"></div>
</div>
<!-- element水平滾動(dòng)條 native 為 true 時(shí)不出現(xiàn) -->
<div class="el-scrollbar__bar is-vertical">
<div class="el-scrollbar__thumb" style="height: 35.4701%; transform: translateY(0%);"></div>
</div>
</div>
