1. 程式人生 > >HTML:滾動條樣式自定義(IE/FireFox/webkit)

HTML:滾動條樣式自定義(IE/FireFox/webkit)

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
: rgb(0,0,255) !important
; }
/* 滑鼠懸停時按鈕顏色 */ thumb:hover,scrollbarbutton:hover { -moz-appearance: none !important; background-color: rgb(255,0,0) !important; } /* 隱藏上下箭頭 */ scrollbarbutton { display: none !important; } /* 縱向滾動條寬度 */ scrollbar[orient="vertical"] { min-width: 15px !important; } }

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>