停止使用el-scrollbar作为滚动条！使用simplebar-vue提升滚动条性能N倍！

.box{width:240px;高度：像素;边框：3px纯粉色；/*第三步，滚动容器框，不能设置自动滚动*//*overflow:auto;*/文本对齐：居中；//第六步，如果要修改滚动条的颜色和宽度，可以重写/deep/.simplebar-vertical{width:16px;}/deep/.simplebar-scrollbar::before{背景颜色：绿色；}}问题描述产品强者脸色阴沉，指着屏幕，大声喊道：这个浏览器自带的滚动条样式不漂亮，请不要留下！必须更换！最重要的是可定制！有一段时间，满满的开发...在平时的工作中，有时候需要调整浏览器的滚动条样式。这时候解决办法一般有以下几种方法：通过js自己写一个滚动条，但是性能不好，可能会有奇怪的bug（不推荐）使用css的::webkit-scrollbar来修改滚动条bar样式，但是这个只会在webkit内核的浏览器上生效，火狐不生效（如果能说服用户只用谷歌浏览器，可以试试）我之前写过一篇修改浏览器滚动条样式的帖子，代码可以复制粘贴使用：https://segmentfault.com/a/11...使用UI组件库中的滚动条Bar组件，比如elementui中的el-scrollbar组件，但是大家都知道el-scrollbar做的没有出现在官方组件文档中。是什么原因？如果查看el-scrollbar组件的源码，会发现该组件使用js来操作滚动距离，所以性能不是最优的。源码目录：node_modules/element-ui/package/scrollbars，简要截图：今天给大家推荐一个vue中使用的滚动条组件。之所以好用，主要体现在它的轻量级，这个价钱是用css制作滚动条，保留了原来的滚动条，所以性能非常好。不过，这个组件的名字是：simplebar-vue，当然也有react和angular版本，大家可以去github看看。simplebarvue版的github地址：https://github.com/Grsmto/sim...使用simplebar-vue的渲染看透这个渲染，可以自定义滚动条的宽高和颜色，使用步骤步骤如下（以垂直滚动条为例）：第一步，下载simplebar-vuenpminstallsimplebar-vue--save第二步，导入注册//第二步，导入组件和样式并注册从“simplebar-vue”导入simplebar；导入“simplebar/dist/simplebar.min.css";components:{simplebar}第三步，取消滚动条容器的设置overflow:auto；如下：.scrollBarWrap{width:240px;height:像素;边框：3px纯粉色；/*第三步，滚动容器框，不能设置自动滚动，注释掉*//*overflow:auto;*/}第四步，给滚动条容器添加标签data-Simplebar加上data-simplebar表示这是滚动条的容器，让组件实现滚动效果{{item}}