webkit內核的瀏覽器滾動條定製

    ::-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團隊有計劃擴展它並推進成爲一個標準的僞類)