之前做的项目中客户觉得滚动条的样式样式很丑，让我们优化一下。既然客户有要求那肯定得满足啊，但是因为我也没有做过，也不知道咋搞，于是就在网上搜索了一下。发现可以通过 ::-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的可拖动按钮).
因为这篇文章主要是实现滚动条的样式，所以我就没举例了，感兴趣的童鞋可以试试。
参考资料：https://developer.mozilla.org/zh-CN/docs/Web/CSS/::-webkit-scrollbar
