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

項目中正好遇到這個問題，在網上搜了搜，終於找到合適的方法，僅借鑒過來供自己和大家學習
接到UE需求，需要對界面滾動條進行修改，主要是鼠標懸停改變顏色和大小，心里想着是比較簡單的（萬惡的IE肯定不在考慮范圍內），誰知道愣是搞了半天才完成ORZ，直接上源碼和實現圖吧。
其他前端有趣的例子和坑合集：https://github.com/wqhui/blog
直接預覽：預覽鏈接

::-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)
        }

又很偶然的發現background-clip: padding-box，設置該屬性后背景延伸至內邊距（padding）外沿，不會繪制到邊框處，也就是說設置該屬性后，背景將被限制在內容和邊距之內，邊框背景不會改變。
得出解決方案：鼠標不懸浮設置背景色和background-clip: padding-box，邊框顏色改成透明；懸停時改變背景色，就完成了鼠標懸停改變滾動條樣式（高度、寬度、顏色）

原文鏈接：https://blog.csdn.net/dKnightL/article/details/88317356