自定義瀏覽器滾動條樣式

Gaara發表於2018-02-27
瀏覽器

昨天看微信小程式開發文件的時候，發現網頁的滾動條並不是系統預設的樣式，配個圖體會下

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

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

相關文章