CSS3或CSS+JS實現改變滾動條樣式(兼容全部瀏覽器)

時間 2019-11-10

標籤 css3 css css+js 實現改變滾動條樣式兼容全部瀏覽器欄目 CSS 简体版

原文原文鏈接

/*定義滾動條高寬及背景 高寬分別對應橫豎滾動條的尺寸*/  
::-webkit-scrollbar  
{  
    width: 16px;  /*滾動條寬度*/
    height: 16px;  /*滾動條高度*/
}  
  
/*定義滾動條軌道 內陰影+圓角*/  
::-webkit-scrollbar-track  
{  
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);  
    border-radius: 10px;  /*滾動條的背景區域的圓角*/
    background-color: red;/*滾動條的背景顏色*/  
}  
  
/*定義滑塊 內陰影+圓角*/  
::-webkit-scrollbar-thumb  
{  
    border-radius: 10px;  /*滾動條的圓角*/
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);  
    background-color: green;  /*滾動條的背景顏色*/
}

::-webkit-scrollbar 滾動條總體部分
::-webkit-scrollbar-thumb 滾動條裏面的小方塊，能向上向下移動（或往左往右移動，取決因而垂直滾動條仍是水平滾動條）
::-webkit-scrollbar-track 滾動條的軌道（裏面裝有Thumb）
::-webkit-scrollbar-button 滾動條的軌道的兩端按鈕，容許經過點擊微調小方塊的位置。
::-webkit-scrollbar-track-piece 內層軌道，滾動條中間部分（除去）
::-webkit-scrollbar-corner 邊角，即兩個滾動條的交匯處
::-webkit-resizer 兩個滾動條的交匯處上用於經過拖動調整元素大小的小控件

　　想給單個節點設置滾動條，即在上面的僞類前面加上 ID/樣式名字：例如：javascript

.scroll_style::-webkit-scrollbar  
{  
    width: 16px;  /*滾動條寬度*/
    height: 16px;  /*滾動條高度*/
} 
詳細信息請參考 http://blog.csdn.net/hanshileiai/article/details/40398177

上述樣式是指針對谷歌瀏覽器生效的。（不兼容火狐，IE）

IE 的寫法和上面不太同樣

scrollbar-arrow-color: color; /*三角箭頭的顏色*/
scrollbar-face-color: color; /*立體滾動條的顏色（包括箭頭部分的背景色）*/
scrollbar-3dlight-color: color; /*立體滾動條亮邊的顏色*/
scrollbar-highlight-color: color; /*滾動條的高亮顏色（左陰影？）*/
scrollbar-shadow-color: color; /*立體滾動條陰影的顏色*/
scrollbar-darkshadow-color: color; /*立體滾動條外陰影的顏色*/
scrollbar-track-color: color; /*立體滾動條背景顏色*/
scrollbar-base-color:color; /*滾動條的基色*/

使人遺憾的是火狐目前尚未修改滾動條樣式的 CSS支持css

不過咱們能夠利用插件，比較好的插件有 malihu-custom-scrollbar-plugin html

使用方法以下：java

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<link href="../css/jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" />
<script src="../js/jquery-1.11.1.js"></script>
<script src="../js/jquery-ui-1.10.4.min.js"></script>
<script src="../js/jquery.mousewheel-3.0.6.min.js"></script>
<script src="../js/jquery.mCustomScrollbar.min.js"></script>
<style>
._mCS_1 .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
    background:red;
    width:10px;
}
._mCS_1 .mCSB_scrollTools .mCSB_draggerRail{
    background:blue;
    width:5px;
}
</style>
<body>

<div class="content" style="width:500px;height:500px;overflow-y:auto;border:1px solid green;">
    <div style="height:900px;"></div>
</div>
<script type='text/javascript'>
    (function($){
        $(window).load(function(){
            $(".content").mCustomScrollbar({
                scrollButtons:{
                    enable:false,//是否添加 滾動條兩端按鈕支持 值:true,false
                    scrollType:"continuous",//滾動按鈕滾動類型 值:」continuous」(當你點擊滾動控制按鈕時斷斷續續滾動) 「pixels」(根據每次點擊的像素數來滾動) 
                    scrollSpeed:50,//設置點擊滾動按鈕時候的滾動速度(默認 20)
                    scrollAmount:60//設置點擊滾動按鈕時候每次滾動的數值 像素單位 默認 40像素
                },
                horizontalScroll:false,//是否建立一個水平滾動條 默認是垂直滾動條
                set_width:false,//：設置你內容的寬度 值能夠是像素或者百分比
                set_height:false,//：設置你內容的高度 值能夠是像素或者百分比
                mouseWheel:true,//鼠標滾動的支持 值爲:true.false
                //mouseWheelPixels:10,//：鼠標滾動中滾動的像素數目(step) 值爲以像素爲單位的數值
                callbacks:{
                     onScrollStart:function(){//使用自定義的回調函數在滾動時間開始的時候執行
                     
                     },
                     onScroll:function(){//自定義回調函數在滾動中執行 
                     
                     },
                     onTotalScroll:function(){//當滾動到底部的時候調用這個自定義回調函數
                     
                     },
                     onTotalScrollBack:function(){//當滾動到頂部的時候調用這個自定義回調函數
                     
                     },
                     onTotalScrollOffset:10,//設置到達頂部或者底部的偏移量 像素單位                     
                     
                     whileScrolling:function(){//當用戶正在滾動的時候執行這個自定義回調函數
                     
                     },
                     whileScrollingInterval:10,//設置調用 whileScrolling 回調函數的時間間隔 毫秒單位
                }
            });
        });
    })(jQuery);
</script>
</body>
</html>

其中 mCustomScrollbar.css + jquery.js + jquery-ui.js + mousewheel.js + mCustomScrollbar.js 這5個必須引入。注意引入順序jquery

使人遺憾的人，滾動條的樣式不能夠配置，須要手動寫入樣式(我也是醉了)git

若是頁面上有須要配置的多個滾動條github

._mCS_1 .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
    /* 1st scrollbar dragger style... */
}
._mCS_2 .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
    /* 2nd scrollbar dragger style... */
}
._mCS_3 .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
    /* 3rd scrollbar dragger style... */
}

上面的代碼能夠這樣理解 mCSB_dragger 下面的 mCSB_dragger_bar 固然你對這個層級有點懵逼。還好官方有個圖片指示對應的結構web

根據這張圖片，就能夠很容易的定義滾動條的樣式了。瀏覽器

._mCS_1 .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
    background:red;
    width:10px;
}
._mCS_1 .mCSB_scrollTools .mCSB_draggerRail{ /*這個就對應圖片修改滾動條的背景色*/    
    background:blue;
    width:5px;
}

修改樣式就對應上面的圖片看他們的層級和名字修改對應的樣式便可函數

分類: CSS,html(5)/css(3)