CSS3改变滚动条样式

1、::-webkit-scrollbar   滑块的宽度，width是垂直方向的宽度，height是水平方向的宽度；
2、::-webkit-scrollbar-thumb  滑块部分的样式，宽高就不用设置了；
3、::-webkit-scrollbar-track   轨道部分的样式，宽高就不用设置了；

只有webkit内核的浏览器支持此样式，pc端有兼容问题，移动端可以使用
例子：

<div id="div1">
    <div class="content"></div>
</div>

#div1{
    width: 500px;
    height: 300px;
    overflow: auto;
    border: 1px solid #ccc;
}
#div1::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
#div1::-webkit-scrollbar-thumb{
    background: #ccc;
    border-radius: 10px;
}
#div1::-webkit-scrollbar-track {
    background: #fff;
    box-shadow: inset 0 0 5px #ccc;
    border-radius: 10px;

}
.content{
    width: 1000px;
    height: 500px;

}