自定義瀏覽器滾動條樣式

昨天看微信小程序開發文檔的時候，發現網頁的滾動條並非系統默認的樣式，配個圖體會下

chrome 瀏覽器下顯示（safari 下亦如此）

firefox 瀏覽器下顯示

ie 瀏覽器下顯示

看下源碼發現只是 webkit內核的瀏覽器才生效，也就是沒給 firefox 和 ie 作兼容（好任性）

之前沒怎麼修改過滾動條樣式，頂可能是讓滾動條隱藏。既然遇到了，就簡單的查一下，捋一捋。不查不知道，一查才發現網上有些還介紹挺全的，那我寫這篇文章的意義何在？……算了，本着不浪費...我截的這幾張圖的原則...本身動手試一下唄，也算作個記錄。

webkit內核瀏覽器下修改樣式

其實，代碼很簡單，css部分：

* {
    margin: 0;
    padding: 0;
}
div {
    width: 300px;
    height: 150px;
    border: 1px solid #444;
    margin: 50px;
    overflow: auto;
}
p {
    width: 400px;
}
    
/*控制整個滾動條*/
::-webkit-scrollbar {
    background-color: lightgray;
    width: 10px;
    height: 10px;
    background-clip: padding-box;
}

/*滾動條兩端方向按鈕*/
::-webkit-scrollbar-button {
    background-color: pink;
}

/*滾動條中間滑動部分*/
::-webkit-scrollbar-thumb {
    background-color: blue;
    border-radius: 5px;
}

/*滾動條右下角區域*/
::-webkit-scrollbar-corner {
    background-color: red;
}
複製代碼

html結構部分

<div>
    <p>Webkit內核瀏覽器滾動條測試-Webkit內核瀏覽器滾動條測試-Webkit內核瀏覽器滾動條測試-Webkit內核瀏覽器滾動條測試-Webkit內核瀏覽器滾動條測試-Webkit內核瀏覽器滾動條測試-Webkit內核瀏覽器滾動條測試-Webkit內核瀏覽器滾動條測試-Webkit內核瀏覽器滾動條測試-Webkit內核瀏覽器滾動條測試-Webkit內核瀏覽器滾動條測試-Webkit內核瀏覽器滾動條測試-Webkit內核瀏覽器滾動條測試-Webkit內核瀏覽器滾動條測試-Webkit內核瀏覽器滾動條測試-Webkit內核瀏覽器滾動條測試-Webkit內核瀏覽器滾動條測試-Webkit內核瀏覽器滾動條測試-Webkit內核瀏覽器滾動條測試-Webkit內核瀏覽器滾動條測試-Webkit內核瀏覽器滾動條測試-Webkit內核瀏覽器滾動條測試-Webkit內核瀏覽器滾動條測試-Webkit內核瀏覽器滾動條測試-Webkit內核瀏覽器滾動條測試-Webkit內核瀏覽器滾動條測試-</p>
</div>
複製代碼

chrome 下效果以下(樣式比較low，湊合看)：

ie瀏覽器修改樣式

div {
   scrollbar-arrow-color: #f4ae21; /**//*三角箭頭的顏色*/ 
   scrollbar-face-color: #333; /**//*立體滾動條的顏色*/ 
   scrollbar-3dlight-color: #666; /**//*立體滾動條亮邊的顏色*/ 
   scrollbar-highlight-color: #666; /**//*滾動條空白部分的顏色*/ 
   scrollbar-shadow-color: #999; /**//*立體滾動條陰影的顏色*/ 
   scrollbar-darkshadow-color: #666; /**//*立體滾動條強陰影的顏色*/ 
   scrollbar-track-color: #666; /**//*立體滾動條背景顏色*/ 
   scrollbar-base-color:#f8f8f8; /**//*滾動條的基本顏色*/ 
}
複製代碼

效果以下

感受 ie 能修改的樣式仍是少了，好比寬高應該是不能設置（也可能我沒找到）。另外 firefox 下樣式暫時沒有找到好的解決方法，網上找到的試過都沒有生效，若是有找到的能夠告知下，感謝。

放下參考傳送門，感謝，侵必刪 傳送門1 傳送門2

其實感受這篇文章水分有點大，有些東西都不是本身原創的，繼續努力吧