今天心情很是不好呐，上午没来上班，钉钉申请通过，人事居然扣除我双倍工资，记过一次。次奥！***屌毛，长话短说，很是郁闷。
-webkit-scrollbar
众所周知，浏览器默认的滚动条样式实在是..不怎么美观，当然，既然不堪入目，那么我们就要去改变它。
css3的强势登场，颠覆了往日js独大浏览器动画 效果 美观 体验等。回到当前，先了解下滚动条。滚动条从外观来看是由两部分组成：1、可以滑动的部分，即为滑块。2、滚动条的轨道，即滑块的轨道，为了明显 美观，通常轨道颜色较浅，突出滑块。
滚动条的样式主要有三部分组成：
1、::-webkit-scrollbar 滚动条整体样式；
2、::-webkit-scrollbar-thumb 滑块部分；
3、::-webkit-scrollbar-thumb 轨道部分；
下面就来看一下代码：
<div class="box">
<div class="scrollbar"></div>
</div>
CSS代码：
.box{
width: 150px;
height: 200px;
overflow: scroll;
margin: 100px;
}
.scrollbar{
width: 30px;
height: 300px;
margin: 0 auto;
}
/*滚动条整体样式*/
.box::-webkit-scrollbar {
width: 10px;
height: 1px;
}
/*滚动条滑块*/
.box::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: #535353;
}
/*滚动条轨道*/
.box::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0);
border-radius: 10px;
background: #ccc;
}
看下效果：
屌爆屌爆
ps：内容小于div高度，滚动条会消失，另外，你也可以根据需求，设计各种各样式的滚动条，还可以使用渐变颜色更甚之图片哦，如果页面有多处滚动条，省略类名 id，全局添加
兼容性：
兼容性
可以看到，兼容性总体来说还不错，移动端的话还是不错的，不久的将来，将会普及大地的
如果非要兼容所有的话，js上场呗，懒得写的话，插件呗☺
