这是我参与更文挑战的第2天，活动详情查看： 更文挑战
之前做的项目中客户觉得滚动条的样式样式很丑，让我们优化一下。既然客户有要求那肯定得满足啊，但是因为我也没有做过，也不知道咋搞，于是就在网上搜索了一下。发现可以通过 ::-webkit-scrollbar CSS伪类选择器来美化滚动条样式。使用后发现，嗯，真不错。
::-webkit-scrollbar 仅仅在支持WebKit的浏览器 (例如, 谷歌Chrome, 苹果Safari)可以使用.
::-webkit-scrollbar — 整个滚动条.
::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头).
::-webkit-scrollbar-thumb — 滚动条上的滚动滑块.
::-webkit-scrollbar-track — 滚动条轨道.
::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分.
::-webkit-scrollbar-corner — 当同时有垂直滚动条和水平滚动条时交汇的部分.
/* 整个滚动条背景 */
::-webkit-scrollbar {
width: 20px;
background-color: #F5F5F5;
}
/* 滚动条上的按钮 (上下箭头). */
::-webkit-scrollbar-button {
width: 20px;
background-color: rgb(166, 167, 173);
opacity: 0.2;
}
::-webkit-scrollbar-thumb {
width: 10px;
/* 上下两头给个圆角 */
background-color: #CBCBCB;
border-radius: 10px;
/* 还可以给它加个阴影 */
box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
}
/* 滚动条轨道 */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
border-radius: 10px;
background-color: #ebe9e9;
}
/* 当同时有垂直滚动条和水平滚动条时交汇的部分. */
::-webkit-scrollbar-corner {
background: steelblue;
border-radius: 50% 50%;
}
出来的效果是这样的
请忽略这个有点丑陋的样式，主要看效果哦。（我觉得颜色配的好话应该挺好看的，奈何我没有这个优秀的审美）
其实文档里还有这个属性：
::-webkit-resizer — 某些元素的corner部分的部分样式(例:textarea的可拖动按钮).
因为这篇文章主要是实现滚动条的样式，所以我就没举例了，感兴趣的童鞋可以试试。
