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>