滚动条样式美化

之前做的项目中客户觉得滚动条的样式样式很丑，让我们优化一下。既然客户有要求那肯定得满足啊，但是因为我也没有做过，也不知道咋搞，于是就在网上搜索了一下。发现可以通过 ::-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