当内容超出容器时，容器会出现滚动条，其自带的滚动条有时无法满足我们审美要求，那么我们可以通过
css伪类来实现对滚动条的自定义
来自：DIV 自定义滚动条样式
滚动条的css样式主要有三部分组成
::-webkit-scrollbar ： 定义了滚动条整体的样式::-webkit-scrollbar-thumb ： 滑块部分::-webkit-scrollbar-track ： 轨道部分
下面以overflow-y:auto;为例（overflow-x:auto同）
html
<div class="test test-1"><div class="scrollbar"></div></div>
css
.test{width: 50px;height: 200px;overflow: auto;float: left;margin: 5px;border: none;}.scrollbar{width: 30px;height: 300px;margin: 0 auto;}/*滚动条整体样式*/.test-1::-webkit-scrollbar {/*高宽分别对应横竖滚动条的尺寸*/width: 10px;height: 1px;}/*滚动条里面小方块*/.test-1::-webkit-scrollbar-thumb {border-radius: 10px;-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);background: #535353;}/*滚动条里面轨道*/.test-1::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);border-radius: 10px;background: #EDEDED;}
效果如下如：
a. 改变滚动条的宽度：在
::-webkit-scrollbar中改变即可；b. 改变滚动条滑块的圆角，在
::-webkit-scrollbar-thumb中改变；c. 改轨道的圆角在
::-webkit-scrollbar-track中改变；
此外，滚动条的滑块不仅可以填充颜色还可以填充图片如下
html
<div class="test test-5"><div class="scrollbar"></div></div>
css
/*滚动条整体样式*/.test-5::-webkit-scrollbar {width: 10px;height: 1px;}/*滚动条里面小方块*/.test-5::-webkit-scrollbar-thumb {border-radius: 10px;background-color: #F90;background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);}/*滚动条里面轨道*/.test-5::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);/*border-radius: 10px;*/background: #EDEDED;}
效果如下
以上就可以做出自己喜欢的滚动条了
如果文档中会有多个滚动条出现，而且希望所有的滚动条样式是一样的，那么伪元素前面不需要加上
class、id、标签名等之类的任何东西。
