最近做項(xiàng)目中有一個(gè)模塊是用于實(shí)時(shí)監(jiān)控的，左邊有個(gè)菜單欄用于顯示所有的設(shè)備，那當(dāng)然是從數(shù)據(jù)庫(kù)中動(dòng)態(tài)獲取的了，右邊是個(gè)iframe用于顯示監(jiān)控畫(huà)面。本來(lái)這個(gè)功能并不復(fù)雜，左邊的菜單項(xiàng)是利用dtree.js來(lái)實(shí)現(xiàn)的，可時(shí)當(dāng)功能實(shí)現(xiàn)完成之后，卻發(fā)現(xiàn)一個(gè)問(wèn)題，就是左邊菜單欄中的設(shè)備名有的會(huì)很長(zhǎng)，會(huì)超出了div的長(zhǎng)度，準(zhǔn)確說(shuō)是左邊iframe的寬度和長(zhǎng)度不夠。那么，這時(shí)就必須要利用滾動(dòng)條了，可以設(shè)置左邊菜單項(xiàng)div的overflow-x:auto;overlfow-y:auto;這樣就會(huì)自動(dòng)生成了滾動(dòng)條，但是大家都知道自帶的不好看。接下來(lái)就是重點(diǎn)了，如何修改滾動(dòng)條的樣式呢？

經(jīng)過(guò)從網(wǎng)上的不斷搜索，發(fā)現(xiàn)有兩種方法：

第一種方法：利用CSS提供的樣式，一共是8種屬性吧，在這里不做詳細(xì)介紹，網(wǎng)上很多這方面的資料。

第二種方法：自己寫一個(gè)新的滾動(dòng)條，即不用div自帶的滾動(dòng)條。這樣想要什么樣的效果就有什么樣的效果。具體實(shí)現(xiàn)，在網(wǎng)上搜了很多，可以發(fā)現(xiàn)基本上只有豎向滾動(dòng)條，而沒(méi)有橫向滾動(dòng)條，無(wú)奈之下，自己利用jquery寫另一個(gè)滾動(dòng)條，當(dāng)然也借鑒了只有豎向滾動(dòng)條的程序。

說(shuō)一下具體實(shí)現(xiàn)思路：目標(biāo)div 即需要生成滾動(dòng)條的div，里面嵌套了3個(gè)div，分別是用于顯示內(nèi)容的div_content，顯示豎向滾動(dòng)條的div_H,顯示橫向滾動(dòng)條的div_W,具體布局就是按照自帶滾動(dòng)條的div的布局一樣，然后顯示滾動(dòng)條的div即div_H和div_W有各自包含了3個(gè)div，即左右箭頭2個(gè)，滾動(dòng)條1個(gè)。具體代碼如下：

 
if($(_self).children(".jscroll-c").height()==null){ 
//添加內(nèi)容框(div) 
$(_self).wrapInner("<div class='jscroll-c' style='top:0px;z-index:9999;zoom:1;position:relative;'></div>"); 
//添加豎向滾動(dòng)條 
$(_self).append("<div class='jscroll-e' unselectable='on' style='height:97.5%;top:0px;right:0;-moz-user-select:none;position:absolute;overflow:hidden;z-index:10000;'><div class='jscroll-u' style='position:absolute;top:0px;width:100%;right:0;background:blue;overflow:hidden'></div><div class='jscroll-h' unselectable='on' style='background:green;position:absolute;left:0;-moz-user-select:none;border:1px solid'></div><div class='jscroll-d' style='position:absolute;bottom:0px;width:100%;left:0;background:blue;overflow:hidden'></div></div>"); 
//添加橫向滾動(dòng)條 
$(_self).append("<div class='jscroll-s' unselectable='on' style='width:180px;bottom:0px;left:0;-moz-user-select:none;position:absolute;overflow:hidden;z-index:10000;'><div class='jscroll-l' style='position:absolute;bottom:0px;height:100%;left:0;background:blue;overflow:hidden'></div><div class='jscroll-g' unselectable='on' style='height:100%;background:green;position:absolute;left:0;-moz-user-select:none;border:1px solid'></div><div class='jscroll-r' style='position:absolute;bottom:0px;height:100%;right:0;background:blue;overflow:hidden'></div></div>"); 
} 

然后無(wú)非就是一些判斷，div的內(nèi)容是否超過(guò)了div的范圍，監(jiān)聽(tīng)事件的添加。具體代碼可見(jiàn)我的下載資源；

前段時(shí)間，到網(wǎng)上找素材時(shí)，看到了一個(gè)很個(gè)性的滾動(dòng)條式，打開(kāi)Chrome的調(diào)試工具看了一下，發(fā)現(xiàn)不是用JavaScript來(lái)模擬實(shí)現(xiàn)的，覺(jué)得有必要折騰一下。于是在各大瀏覽器中對(duì)比了一下，發(fā)現(xiàn)只用Chrome適用，也就是說(shuō)這個(gè)用的是Chrome的私有CSS屬性。便百之谷之后，發(fā)現(xiàn)原來(lái)不僅僅只用Chrome，其它的瀏覽器在不同程度上支持自定義滾動(dòng)條樣式的。下面是我不斷測(cè)試的結(jié)果，若有錯(cuò)誤或不全，請(qǐng)?jiān)谠u(píng)論里面給出，我會(huì)立馬更正；若有更好的方案，你可以留言，讓大家都開(kāi)開(kāi)眼界。。。。。。

自定義IE瀏覽器滾動(dòng)條樣式

追溯瀏覽器對(duì)滾動(dòng)條的自定義，恐怕最早的就是IE瀏覽器了（好像最開(kāi)始支持的版本是IE5.5）。下面列出了多個(gè)版本的支持性況：

滾動(dòng)條樣式	支持情況	支持瀏覽器版本	可否繼承	描述
scrollbar-3dlight-color	IE特有屬性	IE5.5+	y	設(shè)置滾動(dòng)框的和滾動(dòng)條箭頭左上邊緣的顏色
scrollbar-highlight-color	IE特有屬性	IE5.5+	y	設(shè)置滾動(dòng)框的和滾動(dòng)條箭頭左上邊緣的顏色
scrollbar-face-color	IE特有屬性	IE5.5+	y	設(shè)置滾動(dòng)框和滾動(dòng)條箭頭的顏色
scrollbar-arrow-color	IE特有屬性	IE5.5+	y	設(shè)置滾動(dòng)條箭頭的顏色
scrollbar-shadow-color	IE特有屬性	IE5.5+	y	設(shè)置滾動(dòng)框的和滾動(dòng)條箭頭右下邊緣的顏色
scrollbar-dark-shadow-color	IE特有屬性	IE5.5+	y	設(shè)置滾動(dòng)條槽的顏色
scrollbar-base-color	IE特有屬性	IE5.5+	y	設(shè)置滾動(dòng)條主要構(gòu)成部分的顏色
scrollbar-track-color	IE特有屬性	IE5.5+	y	設(shè)置滾動(dòng)條軌跡組成部分的顏色

為了有助于理解IE中滾動(dòng)條樣式的控制，你可以查看如下的圖片：

以上所寫的幾個(gè)四個(gè)CSS屬性，足以控制Win 8系統(tǒng)下，IE瀏覽器的滾動(dòng)條樣式了。但經(jīng)過(guò)測(cè)試，發(fā)現(xiàn)，其它的四個(gè)屬性仍然支持（主要是在以上幾個(gè)屬性空缺時(shí)，就會(huì)體現(xiàn)其作用）。具體如下：

1. 關(guān)于scrollbar-track-color，scrollbar-face-color與scrollbar-base-color。直接看英語(yǔ)單詞，你就也許能明白scroll-base-color是一個(gè)備用顏色，只要前兩者未設(shè)置時(shí)，它就開(kāi)始起作用了。但是你得注意，當(dāng)scrollbar-base-color用來(lái)作scrollbar-track-color功能來(lái)用時(shí)，你會(huì)發(fā)現(xiàn)，實(shí)際顏色與設(shè)定的顏色要淡一點(diǎn)。不信你可以這樣試試：只設(shè)置一下scrollbar-base-color看看滾動(dòng)條的效果。
2. 關(guān)于scrollbar-dark-shadow-color屬性，通過(guò)測(cè)試發(fā)現(xiàn)Win 8下IE10，IE11滾動(dòng)條并沒(méi)有改變?？赡苁莣in 8的滾動(dòng)條重新定義了，導(dǎo)致沒(méi)有了隱影了吧?。▋H個(gè)人猜想）
3. 通過(guò)觀察我們發(fā)現(xiàn)，Win 8下的滾動(dòng)條中，上箭頭和下箭頭后面的背景顏色都已經(jīng)從scroll-face-color中脫離出來(lái)了，從屬于scroll-track-color屬性控制。

感覺(jué)IE瀏覽器滾動(dòng)條自定制功能并不是很強(qiáng)，只能控制一樣顯示各個(gè)部分的顏色而已，像寬度，結(jié)構(gòu)等都無(wú)法控制，要靠出個(gè)性點(diǎn)的滾動(dòng)條，很難！很難?。?！

自定義FireFox瀏覽器滾動(dòng)條

在網(wǎng)上找了很多關(guān)于Firfox自定義瀏覽器滾動(dòng)條的方法，發(fā)現(xiàn)firefox中卻實(shí)是不支持的。發(fā)現(xiàn)了幾篇說(shuō)可以更改，自已也跟著代碼寫了幾次（不知是我錯(cuò)了還是。。。），發(fā)現(xiàn)卻是不起作用。以下是一點(diǎn)小的收獲：
 

@-moz-document url-prefix(http://),url-prefix(https://) {   

    /* 滾動(dòng)條顏色 */  

    scrollbar {   

       -moz-appearance: none !important;   

       background: rgb(0,255,0) !important;   

    }   

    /* 滾動(dòng)條按鈕顏色 */  

    thumb,scrollbarbutton {   

       -moz-appearance: none !important;   

       background-color: rgb(0,0,255) !important;   

    }   

    /* 鼠標(biāo)懸停時(shí)按鈕顏色 */  

      

    thumb:hover,scrollbarbutton:hover {   

       -moz-appearance: none !important;   

       background-color: rgb(255,0,0) !important;   

    }   

    /* 隱藏上下箭頭 */  

    scrollbarbutton {   

       display: none !important;   

    }   

    /* 縱向滾動(dòng)條寬度 */  

    scrollbar[orient="vertical"] {   

      min-width: 15px !important;   

    }   

}

 

實(shí)測(cè)以上代碼并不起作用。但也可能是我的瀏覽器的版本不對(duì)吧！你可以試試，要是有效的話，你可以把你的FF版本發(fā)表在文章評(píng)論里面。

下面給兩個(gè)關(guān)于FF滾動(dòng)條的討論(你多少web開(kāi)發(fā)者希望FF能夠像webkit內(nèi)核瀏覽器一樣程度的來(lái)支持滾動(dòng)條自定義)：

• https://bugzilla.mozilla.org/show_bug.cgi?id=547260
• https://bugzilla.mozilla.org/show_bug.cgi?id=77790

webkit內(nèi)核的瀏覽器滾動(dòng)條定制

在所有瀏覽器，滾動(dòng)條可定制性最強(qiáng)的當(dāng)屬webkit內(nèi)核的瀏覽器了。因?yàn)樵创a開(kāi)放的原因，市面上基于webkit內(nèi)核的瀏覽器也是很難窮舉完。例如有：Google Chrome、Opera（opera最近宣布使用webkit內(nèi)核了）、360極速瀏覽器，獵豹瀏覽器等，搜狗瀏覽器······

下面我們來(lái)看一下webkit瀏覽器是如何強(qiáng)大的吧！

 

        CSS

    ::-webkit-scrollbar              { /* 1 */ }

    ::-webkit-scrollbar-button       { /* 2 */ }

    ::-webkit-scrollbar-track        { /* 3 */ }

    ::-webkit-scrollbar-track-piece  { /* 4 */ }

    ::-webkit-scrollbar-thumb        { /* 5 */ }

    ::-webkit-scrollbar-corner       { /* 6 */ }

    ::-webkit-resizer                { /* 7 */ }

以上CSS代碼所管轄的區(qū)域?qū)完P(guān)系：以上注釋中的數(shù)字與下圖中數(shù)字相對(duì)應(yīng)。

上圖正如如下所言：

• ::-webkit-scrollbar        滾動(dòng)條整體部分，其中的屬性有width,height,background,border（就和一個(gè)塊級(jí)元素一樣）等。
• ::-webkit-scrollbar-button      滾動(dòng)條兩端的按鈕?？梢杂胐isplay:none讓其不顯示，也可以添加背景圖片，顏色改變顯示效果。
• ::-webkit-scrollbar-track         外層軌道。可以用display:none讓其不顯示，也可以添加背景圖片，顏色改變顯示效果。
• ::-webkit-scrollbar-track-piece        內(nèi)層軌道，滾動(dòng)條中間部分（除去）。
• ::-webkit-scrollbar-thumb               滾動(dòng)條里面可以拖動(dòng)的那部分
• ::-webkit-scrollbar-corner               邊角
• ::-webkit-resizer                       定義右下角拖動(dòng)塊的樣式

注意：對(duì)以上各個(gè)部分定義width,height時(shí)。有如下功能：若是水平滾動(dòng)條，則width屬性不起作用，height屬性用來(lái)控制滾動(dòng)條相應(yīng)部分豎直方向高度；若是豎直滾動(dòng)條，則height屬性不起作用，width屬性用來(lái)控制相應(yīng)部分的寬度。

能過(guò)上面的不斷的測(cè)試。在Chrome中，滾動(dòng)條中的各個(gè)部分和DOM中塊級(jí)元素是一樣的。通過(guò)::-webkit-scrollbar等就類似于原來(lái)所說(shuō)的CSS中的選擇器。而{}中的屬性，你就像控制一般塊級(jí)元素一樣簡(jiǎn)單（強(qiáng)大啊）。

對(duì)應(yīng)的源代碼如下：

CSS部分代碼：
 

    #scroll-1 {

        width:200px;

        height:200px;

        overflow:auto;

    }

    #scroll-1 div {

        width:400px;

        height:400px;

    }    #scroll-1::-webkit-scrollbar {

        width:10px;

        height:10px;

    }

    #scroll-1::-webkit-scrollbar-button    {

        background-color:#FF7677;

    }

    #scroll-1::-webkit-scrollbar-track     {

        background:#FF66D5;

    }

    #scroll-1::-webkit-scrollbar-track-piece {

        background:url(http://www.lyblog.net/wp/wp-content/themes/mine/img/stripes_tiny_08.png);

    }

    #scroll-1::-webkit-scrollbar-thumb{

        background:#FFA711;

        border-radius:4px;

    }

    #scroll-1::-webkit-scrollbar-corner {

        background:#82AFFF;

    }

    #scroll-1::-webkit-scrollbar-resizer  {

        background:#FF0BEE;

    }

HTML結(jié)構(gòu)：

    <div id='scroll-1'>

        <div >

            <p>請(qǐng)選擇Webkit內(nèi)核的瀏覽器才可以正常的看到滾動(dòng)條的變化。

                小天地，大世界是一個(gè)Web前端的技術(shù)博客。 主要是關(guān)于

                HTML 5,CSS 3,JavaScript,JQuery等。除此之外，還

                包含一些PHP語(yǔ)言等的實(shí)用例子。</p>

            <p>請(qǐng)選擇Webkit內(nèi)核的瀏覽器才可以正常的看到滾動(dòng)條的變化。

                小天地，大世界是一個(gè)Web前端的技術(shù)博客。 主要是關(guān)于

                HTML 5,CSS 3,JavaScript,JQuery等。除此之外，還

                包含一些PHP語(yǔ)言等的實(shí)用例子。</p>

            <p>請(qǐng)選擇Webkit內(nèi)核的瀏覽器才可以正常的看到滾動(dòng)條的變化。

                小天地，大世界是一個(gè)Web前端的技術(shù)博客。 主要是關(guān)于

                HTML 5,CSS 3,JavaScript,JQuery等。除此之外，還

                包含一些PHP語(yǔ)言等的實(shí)用例子。</p>

            <p>請(qǐng)選擇Webkit內(nèi)核的瀏覽器才可以正常的看到滾動(dòng)條的變化。

                小天地，大世界是一個(gè)Web前端的技術(shù)博客。 主要是關(guān)于

                HTML 5,CSS 3,JavaScript,JQuery等。除此之外，還

                包含一些PHP語(yǔ)言等的實(shí)用例子。</p>

            <p>請(qǐng)選擇Webkit內(nèi)核的瀏覽器才可以正常的看到滾動(dòng)條的變化。

                小天地，大世界是一個(gè)Web前端的技術(shù)博客。 主要是關(guān)于

                HTML 5,CSS 3,JavaScript,JQuery等。除此之外，還

                包含一些PHP語(yǔ)言等的實(shí)用例子。</p>

        </div>

    </div>

通過(guò)以上，我們幾乎就可以來(lái)重寫網(wǎng)站的滾動(dòng)條了，但是webkit提供的還有更多的偽類，可以定制更豐富滾動(dòng)條樣式。本文以下內(nèi)容參考：https://www.webkit.org/blog/363/styling-scrollbars/

• :horizontal     horizontal  偽類，主要應(yīng)用于選擇水平方向滾動(dòng)條。
• :vertical    vertical偽類主要是應(yīng)用于選擇豎直方向滾動(dòng)條
• :decrement    decrement偽類應(yīng)用于按鈕和內(nèi)層軌道(track piece)。它用來(lái)指示按鈕或者內(nèi)層軌道是否會(huì)減小視窗的位置(比如，垂直滾動(dòng)條的上面，水平滾動(dòng)條的左邊。)
• :increment     increment偽類與和decrement類似，用來(lái)指示按鈕或內(nèi)層軌道是否會(huì)增大視窗的位置(比如，垂直滾動(dòng)條的下面和水平滾動(dòng)條的右邊。)
• :start    start偽類也應(yīng)用于按鈕和滑塊。它用來(lái)定義對(duì)象是否放到滑塊的前面。
• :end     類似于start偽類，標(biāo)識(shí)對(duì)象是否放到滑塊的后面。
• :double-button    該偽類可以用于按鈕和內(nèi)層軌道。用于判斷一個(gè)按鈕是不是放在滾動(dòng)條同一端的一對(duì)按鈕中的一個(gè)。對(duì)于內(nèi)層軌道來(lái)說(shuō)，它表示內(nèi)層軌道是否緊靠一對(duì)按鈕。
• :single-button    類似于double-button偽類。對(duì)按鈕來(lái)說(shuō)，它用于判斷一個(gè)按鈕是否自己獨(dú)立的在滾動(dòng)條的一段。對(duì)內(nèi)層軌道來(lái)說(shuō)，它表示內(nèi)層軌道是否緊靠一個(gè)single-button。
• :no-button    用于內(nèi)層軌道，表示內(nèi)層軌道是否要滾動(dòng)到滾動(dòng)條的終端，比如，滾動(dòng)條兩端沒(méi)有按鈕的時(shí)候。
• :corner-present    用于所有滾動(dòng)條軌道，指示滾動(dòng)條圓角是否顯示。
• :window-inactive    用于所有的滾動(dòng)條軌道，指示應(yīng)用滾動(dòng)條的某個(gè)頁(yè)面容器(元素)是否當(dāng)前被激活。(在webkit最近的版本中，該偽類也可以用于::selection偽元素。webkit團(tuán)隊(duì)有計(jì)劃擴(kuò)展它并推動(dòng)成為一個(gè)標(biāo)準(zhǔn)的偽類)

另外，:enabled、:disabled、:hover、和:active等偽類同樣在滾動(dòng)條中適用。

看了這些偽類，怎么也沒(méi)有明白是什么意思，還是自已得寫的試試。實(shí)踐出真知嘛！你可以擊接以下鏈接到官方演示DEMO（感覺(jué)可以學(xué)到很多東西的）：http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/overflow-scrollbar-combinations.html
 

三國(guó)平分，終歸一統(tǒng)

為了一致的用戶體驗(yàn)，有時(shí)我們就不得不放棄使用部分瀏覽器提供的CSS接口來(lái)定制滾動(dòng)條，轉(zhuǎn)而尋求更佳的代替方案。

其中的一中方案是使用jQuery插件，jquery-custom-content-scroller。使用插件的好處是顯而易見(jiàn)的，但是壞處也多得去了。要是您想了解jQuery-custom-content-scroller的具體使用方法，請(qǐng)移步到：http://manos.malihu.gr/jquery-custom-content-scroller/

 

下面我就jQuery滾動(dòng)條插件的使用作一下簡(jiǎn)單介紹：

<link rel="stylesheet" type="text/css" href="jquery.mCustomScrollbar.css" >

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script src="jquery.mCustomScrollbar.concat.min.js"></script>

第二步：在要顯示滾動(dòng)條的元素（元素內(nèi)容中必須要有溢出的塊，否則就不會(huì)出現(xiàn)滾動(dòng)條）上面，加入class="content"，然后再加入以下代碼：

<script>

    (function($){

        $(window).load(function(){

            $(".content").mCustomScrollbar();

        });

    })(jQuery);

</script>

關(guān)于此插件的詳細(xì)介紹，你可以訪問(wèn)官網(wǎng)，里面講的相當(dāng)詳細(xì)，我就不再此多贅述。

• 滾動(dòng)條
• 瀏覽器
• div