自定義瀏覽器滾動條樣式

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

chrome 瀏覽器下顯示(safari 下亦如此) html

firefox 瀏覽器下顯示
ie 瀏覽器下顯示
看下源碼發現只是 webkit內核的瀏覽器才生效,也就是沒給 firefox 和 ie 作兼容(好任性)

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

webkit內核瀏覽器下修改樣式

其實,代碼很簡單,css部分:web

* {
    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結構部分chrome

<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 傳送門2bash

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

相關文章
相關標籤/搜索