簡(jiǎn)單的設(shè)置方式網(wǎng)上的很多文章都有介紹其弊，像 ::-webkit-scrollbar 台夺、 ::-webkit-scrollbar-track ::-webkit-scrollbar-button偎行，這些都是簡(jiǎn)單的改改顏色，滾動(dòng)條大小的，實(shí)際開發(fā)中大部分都滿足不了需求拱礁。
其實(shí)官方提供了很多偽類元素來幫助我們?cè)敿?xì)配置每一個(gè)部分的UI守伸，下方是關(guān)于滾動(dòng)條詳細(xì)的偽類元素表绎秒，特此記錄以供參考。
::-webkit-scrollbar 滾動(dòng)條整體部分
::-webkit-scrollbar-thumb 滾動(dòng)條里面的方條尼摹，就是能拖動(dòng)的那部分
::-webkit-scrollbar-track 滾動(dòng)條的軌道（里面裝著thumb）
::-webkit-scrollbar-track-piece 內(nèi)層軌道
::-webkit-scrollbar-button 滾動(dòng)條的軌道的兩端按鈕
::-webkit-scrollbar-corner 邊角见芹，即兩個(gè)滾動(dòng)條的交匯處
::-webkit-resizer 兩個(gè)滾動(dòng)條的交匯處上，用于通過拖動(dòng)調(diào)整元素大小的小控件
:horizontal//適用于任何水平方向上的滾動(dòng)條
:vertical//適用于任何垂直方向的滾動(dòng)條
:decrement//適用于按鈕和軌道碎片蠢涝。表示遞減的按鈕或軌道碎片玄呛，例如可以使區(qū)域向上或者向右移動(dòng)的
:increment//適用于按鈕和軌道碎片。表示遞增的按鈕或軌道碎片和二，例如可以使區(qū)域向下或者向左移動(dòng)的
:start//適用于按鈕和軌道碎片徘铝。表示對(duì)象 (按鈕軌道碎片)是否放在滑塊的前面
:end //適用于按鈕和軌道碎片。表示對(duì)象 (按鈕軌道碎片》是否放在滑塊的后面
:double-button//適用于按鈕和軌道碎片惯吕。判斷軌道結(jié)束的位置是否是一對(duì)按鈕惕它。也就是軌道碎片緊挨
:single-button//適用于按鈕和軌道碎片。判斷軌道結(jié)束的位置是否是一個(gè)按鈕混埠。也就是軌道碎片緊挨
:no-button//表示軌道結(jié)束的位置沒有按鈕怠缸。
:corner-present//表示滾動(dòng)條的角落是否存在。
:window-inactive//適用于所有滾動(dòng)條钳宪，表示包含滾動(dòng)條的區(qū)域揭北，焦點(diǎn)不在該窗口的時(shí)候
關(guān)于每個(gè)偽類代表的哪部分以及他們的具體用法我就不具體描述了，太多了吏颖，文筆有限搔体。 [手動(dòng)狗頭]
下面提供幾種示例，看懂了就明白怎么用了半醉，剩下的就自己慢慢試吧疚俱。
用法參考：
// 表示 設(shè)置右側(cè)垂直的滾動(dòng)條
::-webkit-scrollbar-thumb:vertical
// 表示 設(shè)置底部水平的滾動(dòng)條
::-webkit-scrollbar-thumb:horizontal
// 表示 設(shè)置水平方向上 左側(cè)的點(diǎn)擊按鈕 并且按鈕點(diǎn)擊事件是向右移動(dòng)的元素
::-webkit-scrollbar-button:horizontal:decrement:start
最后說一個(gè)神奇的問題。
設(shè)置 ::-webkit-scrollbar-button 之后不顯示滾動(dòng)條兩側(cè)的按鈕缩多。
解決方案是需要設(shè)置 display:flex;
原因我也不知道為啥呆奕。。我是一點(diǎn)一點(diǎn)試出來的衬吆，有哪位大佬知道原理嗎梁钾？請(qǐng)不吝賜教。逊抡。
