需要用到的api，直接从mdn复制过来了，简单粗暴哈！
::-webkit-scrollbar— 整个滚动条.::-webkit-scrollbar-button— 滚动条上的按钮 (上下箭头).::-webkit-scrollbar-thumb— 滚动条上的滚动滑块.::-webkit-scrollbar-track— 滚动条轨道.::-webkit-scrollbar-track-piece— 滚动条没有滑块的轨道部分.::-webkit-scrollbar-corner— 当同时有垂直滚动条和水平滚动条时交汇的部分.::-webkit-resizer— 某些元素的corner部分的部分样式(例:textarea的可拖动按钮).
为了方便，效果图仅用了不同颜色区分出api实现的效果。
1、::-webkit-scrollbar
// style
.mostly-customized-scrollbar::-webkit-scrollbar {
width: 10px;
height: 10px;
background-color: red;
}
// html
<div class="mostly-customized-scrollbar">
Thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword<br>
And pretty tall<br>
thing with weird scrollbars.<br>
Who thought scrollbars could be made weeeeird?
</div>效果图：
从效果图上可以看到，::-webkit-scrollbar伪类选择器，选择到的是整个滚动条，比较容易理解！
2、::-webkit-scrollbar-thumb
// style
...
mostly-customized-scrollbar::-webkit-scrollbar-thumb {background-color: #000;}
// html
同上效果图：
::-webkit-scrollbar-thumb是设置滑动块的。
3、::-webkit-scrollbar-button
// style
...
mostly-customized-scrollbar::-webkit-scrollbar-button {background-color: yellow;}
// html
同上效果图：
点击黄色的部分，滑块可以上下滑动，::-webkit-scrollbar-button是设置上下按钮的样式。
4、::-webkit-scrollbar-track
// style
...
.mostly-customized-scrollbar::-webkit-scrollbar-track {background-color: blue;}
// html
同上
效果图：
可以看到，蓝色替换了原来的红色，这个官方解释是滚动条轨道，也是就滚动条活动的区域。
5、::-webkit-scrollbar-track-piece
// style
...
.mostly-customized-scrollbar::-webkit-scrollbar-track-piece {background-color: skyblue;}
// html
同上效果图：
滚动条没有滑块的轨道部分，这个api与::-webkit-scrollbar-track的效果雷同，感觉用处不大！
6、::-webkit-scrollbar-corner
// style
...
.mostly-customized-scrollbar::-webkit-scrollbar-corner {background-color: hotpink;}
// html
同上
效果图：
设置滚动条重叠部分的样式。
扒一扒api，感觉比之前清晰了很多！
最后要说的是，兼容性很差。
在火狐的效果图就是这样：
所以，要实现完美的自定义滚动条是不能用这个的！！
参考链接：
developer.mozilla.org/zh-CN/docs/…
