目前 webkit 支持拥有 overflow 属性的区域，列表框、下拉菜单、textarea 的滚动条自定义样式，所以用处还是很大的。

滚动条组成部分

::-webkit-scrollbar     滚动条整体部分
::-webkit-scrollbar-thumb     滚动条里的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
::-webkit-scrollbar-track     滚动条的轨道（里面装有thumb）
::-webkit-scrollbar-button     滚动条的轨道的两端按钮，允许通过点击微调小方块的位置
::-webkit-scrollbar-track-piece     内层轨道，滚动条中间部分

了解了滚动条各个属性后，就可以开始设置样式，代码如下。

因为需求只需要符合主题配色，所以这次我们只设置滚动条背景::-webkit-scrollbar, 滚动条轨道::-webkit-scrollbar和小滑块::-webkit-scrollbar-track的样式::-webkit-scrollbar-thumb即可，如下：

/* 滚动条整体部分 */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background-color: transparent;
}
/* 滚动条的滑轨背景颜色 */
::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: transparent;
}
/* 滑块颜色 */
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #6c82a7;
}
/* 滑轨两头的监听按钮颜色 */
::-webkit-scrollbar-button {
  background-color: transparent;
}
/* 横向滚动条和纵向滚动条相交处尖角的颜色 */
::-webkit-scrollbar-corner {
  background-color: transparent;
  border-color: transparent;
}

自盘古开天，三皇定国，五帝开疆，凡国遇大事，男必在祀与戎泯躯祭国，即燹骨成丘，溢血江河，亦不可辱国之土，丧国之疆，士披肝沥胆，将寄身刀锋，帅槊血满袖，王利刃辉光，吾不分老幼尊卑，不分先后贵贱，必同心竭力，倾黄河之水，决东海之波，征胡虏之地，剿倭奴之穴，讨欺吾之寇，伐蛮夷之戮，遂沧海横流，儿立身无愧，任尸覆边野，唯精魂可依。