Vue+ElementUI开发随笔—优化滚动条的样式

默认的滚动条是图片中这样的，比较粗，而且上下还有箭头，不是很好看。需要给优化一下，用到了下面的Css代码，写在App.vue文件中的<style></style>标签里就可以了。

<style lang="scss">
::-webkit-scrollbar {
  width: 6px;
  height: 8px;
  background-color: #ebeef5;
}
::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
  background-color: #ccc;
}
::-webkit-scrollbar-track{
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  background: rgba(255, 255, 255, 1);
}
</style>

优化后的效果，好看多了

 

 也可以通过宽度的overflow-hidden来把滚动条夹掉，这里不记代码了，留个想法。