正文
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>
