手动通过css来美化界面中的滚动条样式
默认浏览器的滚动条样式很丑，
我们在vue项目中，如果使用了element-ui的话，是可以借用他的滚动条的。
方法一：手动设置滚动条样式，
只能解决chrome浏览器等上面的样式。还可以。不要要求太多。
<div class="wrap"> <p>我是很长的内容</p> </div>
设置样式：
.wrap::-webkit-scrollbar {
/* 滚动条宽度和高度 */
width: 8px;
height: 8px;
}
.wrap::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
border-radius: 10px;
// box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background: #d4d6d9;
}
.wrap::-webkit-scrollbar-track-piece {
/*滚动条里面轨道*/
background-color: #fff;
border-radius: 10px;
}
最后看到的效果如下：
方法二、使用el-scrollbar来包裹元素
这是因为，element-ui虽然官方文档没有写，但是，它内部的确有这么一个组件。
<el-scrollbar wrap-class="" wrap-style="height: 200px;" view-style="" :native="false"> <p>我是很长的内容</p> </el-scrollbar>
就是需要给外面的元素，一个确定的固定高度，才会生效。
展示效果如下：
这个是非常好的。
上一篇：
通过多线程提高代码的执行效率例子