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

05-22 01:15