HTML：滾動條樣式自定義（IE/FireFox/webkit）
阿新 • • 發佈：2019-02-11
1.IE瀏覽器
| 滾動條樣式 | 支援情況 | 描述 |
|---|---|---|
| scrollbar-3dlight-color | IE特有屬性 IE5.5+ | 設定滾動框的和滾動條箭頭左上邊緣的顏色 |
| scrollbar-highlight-color | IE特有屬性 IE5.5+ | 設定滾動框的和滾動條箭頭左上邊緣的顏色 |
| scrollbar-face-color | IE特有屬性 IE5.5+ | 設定滾動框和滾動條箭頭的顏色 |
| scrollbar-arrow-color | IE特有屬性 IE5.5+ | 設定滾動條箭頭的顏色 |
| scrollbar-shadow-color | IE特有屬性 IE5.5+ | 設定滾動框的和滾動條箭頭右下邊緣的顏色 |
| scrollbar-dark-shadow-color | IE特有屬性 IE5.5+ | 設定滾動條槽的顏色 |
| scrollbar-base-color | IE特有屬性 IE5.5+ | 設定滾動條主要構成部分的顏色 |
| scrollbar-track-color | IE特有屬性 IE5.5+ | 設定滾動條軌跡組成部分的顏色 |
windows 8 支援情況
2.FireFox瀏覽器
原文有人做過測試，以下程式碼不能起作用，僅供參考測試。FireFox，目前用外掛才會有效果。
@-moz-document url-prefix(http://),url-prefix(https://) {
/* 滾動條顏色 */
scrollbar {
-moz-appearance: none !important;
background: rgb(0,255,0) !important;
}
/* 滾動條按鈕顏色 */
thumb,scrollbarbutton {
-moz-appearance: none !important;
background-color 3.webkit核心的瀏覽器
| 滾動條樣式 | 描述 |
|---|---|
| -webkit-scrollbar | 滾動條整體部分，其中的屬性有width,height,background,border（就和一個塊級元素一樣）等 |
| -webkit-scrollbar-button | 滾動條兩端的按鈕；可以用display:none讓其不顯示，也可以新增背景圖片，顏色改變顯示效果 |
| -webkit-scrollbar-track | 外層軌道；可以用display:none讓其不顯示，也可以新增背景圖片，顏色改變顯示效果 |
| -webkit-scrollbar-track-piece | 內層軌道，滾動條中間部分（除去） |
| -webkit-scrollbar-thumb | 滾動條裡面可以拖動的那部分 |
| -webkit-scrollbar-corner | 邊角 |
| -webkit-resizer | 定義右下角拖動塊的樣式 |
4.jQuery外掛
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--第一步：引入：滾動條相應的樣式表文件和jquery的庫檔案-->
<link rel="stylesheet" type="text/css" href="jquery.mCustomScrollbar.css" >
<script src="jquery.min.js"></script>
<script src="jquery.mCustomScrollbar.concat.min.js"></script>
<!--第二步：載入-->
<script>
(function($){
$(window).load(function(){
$(".content").mCustomScrollbar();
});
})(jQuery);
</script>
</head>
<body>
<!--第三步：在要顯示滾動條的元素加入 class="content" -->
<div class="content"></div>
</body>
</html>