Html 设置滚动条

简单的设置方式网上的很多文章都有介绍，像 ::-webkit-scrollbar 、 ::-webkit-scrollbar-track ::-webkit-scrollbar-button，这些都是简单的改改颜色，滚动条大小的，实际开发中大部分都满足不了需求。

其实官方提供了很多伪类元素来帮助我们详细配置每一个部分的UI，下方是关于滚动条详细的伪类元素表，特此记录以供参考。

::-webkit-scrollbar 滚动条整体部分
::-webkit-scrollbar-thumb 滚动条里面的方条，就是能拖动的那部分
::-webkit-scrollbar-track 滚动条的轨道（里面装着thumb）
::-webkit-scrollbar-track-piece 内层轨道
::-webkit-scrollbar-button 滚动条的轨道的两端按钮
::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处
::-webkit-resizer 两个滚动条的交汇处上，用于通过拖动调整元素大小的小控件

:horizontal//适用于任何水平方向上的滚动条
:vertical//适用于任何垂直方向的滚动条
:decrement//适用于按钮和轨道碎片。表示递减的按钮或轨道碎片，例如可以使区域向上或者向右移动的
:increment//适用于按钮和轨道碎片。表示递增的按钮或轨道碎片，例如可以使区域向下或者向左移动的
:start//适用于按钮和轨道碎片。表示对象 (按钮轨道碎片)是否放在滑块的前面
:end //适用于按钮和轨道碎片。表示对象 (按钮轨道碎片》是否放在滑块的后面
:double-button//适用于按钮和轨道碎片。判断轨道结束的位置是否是一对按钮。也就是轨道碎片紧挨
:single-button//适用于按钮和轨道碎片。判断轨道结束的位置是否是一个按钮。也就是轨道碎片紧挨
:no-button//表示轨道结束的位置没有按钮。
:corner-present//表示滚动条的角落是否存在。
:window-inactive//适用于所有滚动条，表示包含滚动条的区域，焦点不在该窗口的时候

关于每个伪类代表的哪部分以及他们的具体用法我就不具体描述了，太多了，文笔有限。 [手动狗头]

下面提供几种示例，看懂了就明白怎么用了，剩下的就自己慢慢试吧。

用法参考：

// 表示 设置右侧垂直的滚动条
::-webkit-scrollbar-thumb:vertical
// 表示 设置底部水平的滚动条
::-webkit-scrollbar-thumb:horizontal
// 表示 设置水平方向上 左侧的点击按钮 并且按钮点击事件是向右移动的元素
::-webkit-scrollbar-button:horizontal:decrement:start

最后说一个神奇的问题。
设置 ::-webkit-scrollbar-button 之后不显示滚动条两侧的按钮。
解决方案是需要设置 display:flex;
原因我也不知道为啥。。我是一点一点试出来的，有哪位大佬知道原理吗？请不吝赐教。。