elementUI的隱藏組件el-scroll--滾動條

由於原生的滾動條存在兼容性問題並且樣式不是太美觀，在項目中經常使用的是elementui，發現elementui中有個隱藏的組件，就是element官網使用的滾動條，可以優化滾動條樣式。鼠標經過的時候才會顯示，簡單美觀。

首先全局引入element，import ElementUI from 'element-ui';

簡單使用–只是用豎的滾動條
只是用豎的滾動條，外層box設置寬高，內層的內容充滿，設置el-scrollbar的高度。
其實就是把原生的滾動條擠到看不到地方！！

<template>

<div>

<div class="box">

<el-scrollbar>

<p>elementUI隱藏組件</p>

<p>優化滾動條樣式</p>

<p>其實是將原生的滾動條擠到看不見的位置</p>

</el-scrollbar>

</div>

</div>

</template>

<style>

.box {

width: 100px;

height: 100px;

background: aliceblue;

}

.el-scrollbar {

height: 100%;

}

.el-scrollbar__wrap {

overflow: scroll;

width: 110%;

height: 120%;

}

</style>