自訂瀏覽器捲軸的樣式，打造屬於你的捲軸風格

標籤：

前段時間，到網上找素材時，看到了一個很個性的捲軸式，開啟Chrome的調試工具看了一下，發現不是用JavaScript來類比實現的，覺得有必要折騰一下。於是在各大瀏覽器中對比了一下，發現只用Chrome適用，也就是說這個用的是Chrome的私人CSS屬性。便百之穀之後，發現原來不僅僅只用Chrome，其它的瀏覽器在不同程度上支援自訂捲軸樣式的。下面是我不斷測試的結果，若有錯誤或不全，請在評論裡面給出，我會立馬更正；若有更好的方案，你可以留言，讓大家都開開眼界。。。。。。

自訂IE瀏覽器捲軸樣式

追溯瀏覽器對捲軸的自訂，恐怕最早的就是IE瀏覽器了（好像最開始支援的版本是IE5.5）。下面列出了多個版本的支援性況：

捲軸樣式	支援情況	支援瀏覽器版本	可否繼承	描述
scrollbar-3dlight-color	IE特有屬性	IE5.5+	y	設定捲動方塊的和捲軸箭頭左上邊緣的顏色
scrollbar-highlight-color	IE特有屬性	IE5.5+	y	設定捲動方塊的和捲軸箭頭左上邊緣的顏色
scrollbar-face-color	IE特有屬性	IE5.5+	y	設定捲動方塊和捲軸箭頭的顏色
scrollbar-arrow-color	IE特有屬性	IE5.5+	y	設定捲軸箭頭的顏色
scrollbar-shadow-color	IE特有屬性	IE5.5+	y	設定捲動方塊的和捲軸箭頭右下邊緣的顏色
scrollbar-dark-shadow-color	IE特有屬性	IE5.5+	y	設定捲軸槽的顏色
scrollbar-base-color	IE特有屬性	IE5.5+	y	設定捲軸主要構成部分的顏色
scrollbar-track-color	IE特有屬性	IE5.5+	y	設定捲軸軌跡組成部分的顏色

為了有助於理解IE中捲軸樣式的控制，你可以查看如下的圖片：

經過不斷的測試發現，在Win8 下面，有一部分樣式都起著相同的作用。估計是因為在Win8中扁平化的介面設計而重新定議了系統中捲軸！以下是Win 8下面的捲軸樣式，並寫出了和CSS支援的情況：

以上所寫的幾個四個CSS屬性，足以控制Win 8系統下，IE瀏覽器的捲軸樣式了。但經過測試，發現，其它的四個屬性仍然支援（主要是在以上幾個屬性空缺時，就會體現其作用）。具體如下：

1. 關於scrollbar-track-color，scrollbar-face-color與scrollbar-base-color。直接看英語單詞，你就也許能明白scroll-base-color是一個備用顏色，只要前兩者未設定時，它就開始起作用了。但是你得注意，當scrollbar-base-color用來作scrollbar-track-color功能來用時，你會發現，實際顏色與設定的顏色要淡一點。不信你可以這樣試試：只設定一下scrollbar-base-color看看捲軸的效果。
2. 關於scrollbar-dark-shadow-color屬性，通過測試發現Win 8下IE10，IE11捲軸並沒有改變。可能是win 8的捲軸重新定義了，導致沒有了隱影了吧！（僅個人猜想）
3. 通過觀察我們發現，Win 8下的捲軸中，上箭頭和下箭頭後面的背景顏色都已經從scroll-face-color中脫離出來了，從屬於scroll-track-color屬性控制。

感覺IE瀏覽器捲軸自定製功能並不是很強，只能控制一樣顯示各個部分的顏色而已，像寬度，結構等都無法控制，要靠出個性點的捲軸，很難！很難！！！

自訂FireFox瀏覽器捲軸

在網上找了很多關於Firfox自訂瀏覽器捲軸的方法，發現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;       }   }

實測以上代碼並不起作用。但也可能是我的瀏覽器的版本不對吧！你可以試試，要是有效話，你可以把你的FF版本發表在文章評論裡面。

下面給兩個關於FF捲軸的討論(你多少web開發人員希望FF能夠像webkit核心瀏覽器一樣程度的來支援捲軸自訂)：

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

webkit核心的瀏覽器捲軸定製

在所有瀏覽器，捲軸可定製性最強的當屬webkit核心的瀏覽器了。因為原始碼開放的原因，市面上基於webkit核心的瀏覽器也是很難窮舉完。例如有：Google Chrome、Opera（opera最近宣布使用webkit核心了）、360極速瀏覽器，獵豹瀏覽器等，搜狗瀏覽器······

下面我們來看一下webkit瀏覽器是如何強大的吧！

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代碼所管轄的地區對就關係：以上注釋中的數字與中數字相對應。

正如如下所言：

• ::-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                       定義右下角拖動塊的樣式

注意：對以上各個部分定義width,height時。有如下功能：若是水平捲軸，則width屬性不起作用，height屬性用來控制捲軸相應部分豎直方向高度；若是豎直捲軸，則height屬性不起作用，width屬性用來控制相應部分的寬度。

能過上面的不斷的測試。在Chrome中，捲軸中的各個部分和DOM中區塊層級元素是一樣的。通過::-webkit-scrollbar等就類似於原來所說的CSS中的選取器。而{}中的屬性，你就像控制一般區塊層級元素一樣簡單（強大啊）。

對應的原始碼如下：

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結構：

<div id=‘scroll-1‘>        <div >            <p>請選擇Webkit核心的瀏覽器才可以正常的看到捲軸的變化。                小天地，大世界是一個Web前端的技術部落格。 主要是關於                HTML 5,CSS 3,JavaScript,JQuery等。除此之外，還                包含一些PHP語言等的實用例子。</p>            <p>請選擇Webkit核心的瀏覽器才可以正常的看到捲軸的變化。                小天地，大世界是一個Web前端的技術部落格。 主要是關於                HTML 5,CSS 3,JavaScript,JQuery等。除此之外，還                包含一些PHP語言等的實用例子。</p>            <p>請選擇Webkit核心的瀏覽器才可以正常的看到捲軸的變化。                小天地，大世界是一個Web前端的技術部落格。 主要是關於                HTML 5,CSS 3,JavaScript,JQuery等。除此之外，還                包含一些PHP語言等的實用例子。</p>            <p>請選擇Webkit核心的瀏覽器才可以正常的看到捲軸的變化。                小天地，大世界是一個Web前端的技術部落格。 主要是關於                HTML 5,CSS 3,JavaScript,JQuery等。除此之外，還                包含一些PHP語言等的實用例子。</p>            <p>請選擇Webkit核心的瀏覽器才可以正常的看到捲軸的變化。                小天地，大世界是一個Web前端的技術部落格。 主要是關於                HTML 5,CSS 3,JavaScript,JQuery等。除此之外，還                包含一些PHP語言等的實用例子。</p>        </div>    </div>

通過以上，我們幾乎就可以來重寫網站的捲軸了，但是webkit提供的還有更多的偽類，可以定製更豐富捲軸樣式。本文以下內容參考：https://www.webkit.org/blog/363/styling-scrollbars/

• :horizontal     horizontal  偽類，主要應用於選擇水平方向捲軸。
• :vertical    vertical偽類主要是應用於選擇豎直方向捲軸
• :decrement    decrement偽類應用於按鈕和內層軌道(track piece)。它用來指示按鈕或者內層軌道是否會減小視窗的位置(比如，垂直捲軸的上面，水平捲軸的左邊。)
• :increment     increment偽類與和decrement類似，用來指示按鈕或內層軌道是否會增大視窗的位置(比如，垂直捲軸的下面和水平捲軸的右邊。)
• :start    start偽類也應用於按鈕和滑塊。它用來定義對象是否放到滑塊的前面。
• :end     類似於start偽類，標識對象是否放到滑塊的後面。
• :double-button    該偽類可以用於按鈕和內層軌道。用於判斷一個按鈕是不是放在捲軸同一端的一對按鈕中的一個。對於內層軌道來說，它表示內層軌道是否緊靠一對按鈕。
• :single-button    類似於double-button偽類。對按鈕來說，它用於判斷一個按鈕是否自己獨立的在捲軸的一段。對內層軌道來說，它表示內層軌道是否緊靠一個single-button。
• :no-button    用於內層軌道，表示內層軌道是否要滾動到捲軸的終端，比如，捲軸兩端沒有按鈕的時候。
• :corner-present    用於所有捲軸軌道，指示捲軸圓角是否顯示。
• :window-inactive    用於所有的捲軸軌道，指示應用捲軸的某個頁面容器(元素)是否當前被啟用。(在webkit最近的版本中，該偽類也可以用於::selection虛擬元素。webkit團隊有計劃擴充它並推動成為一個標準的偽類)

另外，:enabled、:disabled、:hover、和:active等偽類同樣在捲軸中適用。

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

三國平分，終歸一統

為了一致的使用者體驗，有時我們就不得不放棄使用部分瀏覽器提供的CSS介面來定製捲軸，轉而尋求更佳的代替方案。

其中的一中方案是使用jQuery外掛程式，jquery-custom-content-scroller。使用外掛程式的好處是顯而易見的，但是壞處也多得去了。要是您想瞭解jQuery-custom-content-scroller的具體使用方法，請移步到：http://manos.malihu.gr/jquery-custom-content-scroller/

下面我就jQuery捲軸外掛程式的使用作一下簡單介紹：

第一步：在內容的頂部引入捲軸相應的樣式表檔案和jquery的庫檔案，jquery外掛程式jquery.mcustomscrollbar檔案。代碼如下：

<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>

第二步：在要顯示捲軸的元素（元素內容中必須要有溢出的塊，否則就不會出現捲軸）上面，加入class="content"，然後再加入以下代碼：

<script>    (function($){        $(window).load(function(){            $(".content").mCustomScrollbar();        });    })(jQuery);</script>

關於此外掛程式的詳細介紹，你可以訪問官網，裡面講的相當詳細，我就不再此多贅述。

原創文章，轉載請註明出處：小天地，大世界[http://www.lyblog.net]
文章地址：http://www.lyblog.net/detail/314.html

自訂瀏覽器捲軸的樣式，打造屬於你的捲軸風格