幾行代碼輕鬆解決滾動條樣式問題，堪稱神器

相信很多同仁都曾為各種瀏覽器的滾動條樣式困惑過，而且不同的瀏覽器預設的滾動條樣式還不一致。網上也有很多說法修改滾動條樣式，但是大多數都是濫竽充數。今天我只說乾貨，純乾貨，乾貨來自於我的一位同事的推薦，在此，感謝同事，謝謝。

第一步：你需要在樣式<style></style>標簽中插入如下代碼

 1     /* 設置滾動條的樣式 */
 2 
 3     ::-webkit-scrollbar {
 4         width: 5px;
 5         height: 5px;
 6     }
 7 
 8     /* 滾動槽 */
 9 
10     ::-webkit-scrollbar-track {
11         -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
12         border-radius: 5px;
13     }
14 
15     /* 滾動條滑塊 */
16 
17     ::-webkit-scrollbar-thumb {
18         border-radius: 10px;
19         background: rgba(0, 0, 0, 0.1);
20         -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
21     }

第二步：給容器加樣式

overflow:auto;（或者overflow-y:auto;或者overflow-x:auto;）

效果就不貼出來了，讓你親自見證奇跡的時刻！沒效果歡迎丟磚~