鼠標懸停改變滾動條樣式（高度、寬度、顏色）

接到UE需求，需要對界面滾動條進行修改，主要是鼠標懸停改變顏色和大小，心裏想着是比較簡單的（萬惡的IE肯定不在考慮範圍內），誰知道愣是搞了半天才完成ORZ，直接上源碼和實現圖吧。

css代碼

        ::-webkit-scrollbar{
            height: 9px !important;
            width: 9px !important;
        }

        ::-webkit-scrollbar-thumb {
            border-radius: 0;
            border-style: dashed;
            background-color: rgba(157, 165, 183, 0.4);
            border-color: transparent;
            border-width: 1.5px;
            background-clip: padding-box;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: rgba(157, 165, 183, 0.7)
        }

代碼解析

之前看到滾動條的滑塊有-webkit-scrollbar-thumb:hover 屬性，以爲直接改變大小和顏色即可，後面發現壓根顏色是生效了，但是大小不變。

        ::-webkit-scrollbar-thumb:hover {
            height: 9px !important;
            width: 9px !important;
            background: rgba(0, 0, 0, 0.7)
        }

然後現在問題就變成了懸停如何修改大小了，然後無意中發現，滾動條滑塊是由背景顏色和border共同渲染的。

又很偶然的發現background-clip: padding-box//，設置後背景延伸至內邊距（padding）外沿，不會繪製到邊框處，最後想到把邊框顏色改成透明，這不會影響懸停時的樣式，就完成了鼠標懸停改變滾動條樣式（高度、寬度、顏色）