css美化浏览器默认滚动条样式

废话不多说，直接上代码吧

//滚动条的宽度
::-webkit-scrollbar {
  width:5px;
  height:5px;
}

//滚动条凹槽的颜色，还可以设置边框属性
::-webkit-scrollbar-track-piece {
  // background-color:#f8f8f8;  // 这个不要更加好看，如果要了这个样式，没有产生滚动条的时候都会有一个框在右侧
  border-radius: 2px;
}

//滚动条的设置
::-webkit-scrollbar-thumb {
  background-color:#dddddd;
  background-clip:padding-box;
  min-height:28px;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background-color:#bbb;
}

这样是对页面的滚动条美化，如果要对指定的容器进行修改，可以这样写

.el是指定元素的class

.el::-webkit-scrollbar {
 width: 5px;
}
.el::-webkit-scrollbar-track {
 background-color:red;
 -webkit-border-radius: 2px;
 -moz-border-radius: 2px;
 border-radius:2px;
}
.el::-webkit-scrollbar-thumb {
 background-color:green;
 -webkit-border-radius: 2px;
 -moz-border-radius: 2px;
 border-radius:2px;
}