問題描述
- 目前做的項目是vue+elementUI的PC端項目
- 原生滾動條真的有點不能直視
解決過程
- 測試了easyScroll、vue-happy-scroll菇存，發(fā)現(xiàn)前者不兼容IE锁右，后者不能自適應(yīng)窗口縮放
- 打開elementUI官網(wǎng)欺殿，發(fā)現(xiàn)官網(wǎng)本身用了一個滾動條組件浊洞，然后檢索相關(guān)的文章
解決方案
1除师、標(biāo)簽名稱
<el-scrollbar></el-scrollbar>
2、頁面引入，這里一定要設(shè)置外層元素的寬平夜、高；
<div class="c-content">
<div class="c-search-table beauty-Scroll">
<el-scrollbar>
<!-- 需要滾動的內(nèi)容 -->
</el-scrollbar>
</div>
</div>
.c-search-table用來設(shè)置外層元素的寬高卸亮，以及其他樣式忽妒；
.c-search-table{
width: 100%;
height: calc(~"100% - 10px"); /*這里我用了計算屬性*/
}
.beauty-Scroll 用來設(shè)置 <el-scrollbar> 組件的覆蓋樣式，這個樣式一定要寫到全局樣式里面兼贸，這樣才能生效段直，后期使用的時候，只需要再父級元素引入即可溶诞；
.beauty-Scroll{
.el-scrollbar{
height: 100%; /*此處一定要設(shè)置高度鸯檬，不然內(nèi)層的計算屬性不生效*/
}
.el-scrollbar__wrap {
width: calc(~"100% + 17px"); /*將垂直滾動條擠到可視區(qū)域之外*/
height: calc(~"100% + 17px"); /*將水平滾動條擠到可視區(qū)域之外*/
}
}
注：
這里解釋一下，因為滾動條是在el-scrollbar__wrap這個元素上的螺垢，
所以把它設(shè)置大一點喧务，就可以將這個元素上原始的滾動條遮擋掉了，
而新生成的滾動條是相對于el-scrollbar的絕對定位枉圃，所以這里就只顯示好看的那一個啦功茴。
