<template>
<div>
<div class="box">
<el-scrollbar>
<p>刚好项目里面一直在使用的都是element</p>
<p>因为原生的滚动条太丑了</p>
<p>发现elementui中有个隐藏的组件</p>
<p>优化滚动条样式</p>
<p>亲测可用</p>
</el-scrollbar>
</div>
</div>
</template>
<style>
.box {
width: 200px;
height: 100px;
background: aliceblue;
white-space: nowrap;
}
.el-scrollbar {
height: 100%;
}
.box .el-scrollbar__wrap {
overflow: scroll;
width: 110%;
height: 120%;
}
</style>
方法二(有效):
<el-scrollbar style="height:100%;" wrap-class="default-scrollbar__wrap">
<div v-for="o in child.planItems" class="text-item">
{{o.name}}
</div>
</el-scrollbar>
<style>
.default-scrollbar__wrap {
overflow-x: hidden;
}