©2020-2024 ioDraw All rights reserved,
Privacy Policy
<>前言
刚好项目里面一直在使用的都是element，因为原生的滚动条太丑了，发现elementui中有个隐藏的组件，就是element官网使用的滚动条，可以优化滚动条样式。亲测可用，
鼠标经过的时候才会显示，简单美观。
<>正文
首先全局引入element，import ElementUI from 'element-ui';
* 简单使用–只是用竖的滚动条
只是用竖的滚动条，外层box设置宽高，内层的内容充满，设置el-scrollbar的高度。
重要代码：.el-scrollbar__wrap { overflow: scroll; width: 110%; height: 120%; }
，为什么要设置这个宽和高呢？因为：为了把原生的滚动条挤到看不到地方！！这是很重要的。没有这个代码，竖滚动条显示正常，可横向会和原生的滚动条重合。 <
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; } .el-scrollbar { height: 100%; } .el-scrollbar__wrap {
overflow: scroll; width: 110%; height: 120%; } </style>
* 使用横向和竖向的滚动条
让外层盒子的内容不换行white-space: nowrap;，其他代码相同。这个情况也适用与内部是ul，li，table等比较复杂的情况。 <
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>
3.谷歌浏览器直接改变原生滚动条样式。
这样不用其他插件，滚动条也能很好看，不考虑兼容的时候，可以全局设置成这种样式，然后细节处用el-scrollbar~~偷懒，
<style> ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-
thumb{ background-color: #eee; border-radius: 3px; } <style>
<>小结
还有很重要的一点，在vue框架下，样式.el-scrollbar__wrap要写到影响全局的style中，不要写到style scope中，不然会不起作用。
如果怕和别的样式起冲突，可以加前缀.box .el-scrollbar__wrap{ overflow: scroll; width: 110%;
height: 120%;}。宽高不是固定死的，根据自己的页面可以微调一下。
.el-scrollbar 也可以写成行内样式。
如果本文对你有帮助的话，请给我点赞打call哦~o(￣▽￣)ｄo
有其他问题留言 over~