由于原生的滚动条存在兼容性问题并且样式不是太美观,在项目中经常使用的是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>