各瀏覽器滾動條默認寬度是多少？

window.innerWidth - document.body.clientWidth //火狐下17px IE11下17px
chrome的滾動條 我給關(guān)了 所以沒測試
window.innerWidth 瀏覽器可用寬度
document.body.clientWidth body的寬度
我這個式子是在body沒有margin、padding、border的情況下得到的
如果你要是有的話可以做減法

//margin
document.body.style.marginLeft
document.body.style.marginRight
//padding
document.body.style.paddingLeft
document.body.style.paddingRight
//border
document.body.style.borderLeft
document.body.style.borderRight
另外科普一下:
screen.width屏幕分辨率寬度
document.body.scrollWidth 頁面完整寬度
document.body.scrollHeight 頁面完整寬度
document.body.offsetWidth 網(wǎng)頁可見區(qū)域?qū)挾?br /> document.body.offsetHeight 網(wǎng)頁可見區(qū)域高度

自定義IE瀏覽器滾動條樣式

追溯瀏覽器對滾動條的自定義，恐怕最早的就是IE瀏覽器了（好像最開始支持的版本是IE5.5）。下面列出了多個版本的支持性況：

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

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

經(jīng)過不斷的測試發(fā)現(xiàn)，在Win8 下面，有一部分樣式都起著相同的作用。估計是因為在Win8中扁平化的界面設(shè)計而重新定議了系統(tǒng)中滾動條！以下是Win 8下面的滾動條樣式，并寫出了和CSS支持的情況：

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

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

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

自定義FireFox瀏覽器滾動條

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

@-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版本發(fā)表在文章評論里面。

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

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

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

在所有瀏覽器，滾動條可定制性最強的當屬webkit內(nèi)核的瀏覽器了。因為源代碼開放的原因，市面上基于webkit內(nèi)核的瀏覽器也是很難窮舉完。例如有：Google Chrome、Opera（opera最近宣布使用webkit內(nèi)核了）、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代碼所管轄的區(qū)域?qū)完P(guān)系：以上注釋中的數(shù)字與下圖中數(shù)字相對應(yīng)。

上圖正如如下所言：

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

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

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

對應(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>請選擇Webkit內(nèi)核的瀏覽器才可以正常的看到滾動條的變化。
                小天地，大世界是一個Web前端的技術(shù)博客。 主要是關(guān)于
                HTML 5,CSS 3,JavaScript,JQuery等。除此之外，還
                包含一些PHP語言等的實用例子。</p>
            <p>請選擇Webkit內(nèi)核的瀏覽器才可以正常的看到滾動條的變化。
                小天地，大世界是一個Web前端的技術(shù)博客。 主要是關(guān)于
                HTML 5,CSS 3,JavaScript,JQuery等。除此之外，還
                包含一些PHP語言等的實用例子。</p>
            <p>請選擇Webkit內(nèi)核的瀏覽器才可以正常的看到滾動條的變化。
                小天地，大世界是一個Web前端的技術(shù)博客。 主要是關(guān)于
                HTML 5,CSS 3,JavaScript,JQuery等。除此之外，還
                包含一些PHP語言等的實用例子。</p>
            <p>請選擇Webkit內(nèi)核的瀏覽器才可以正常的看到滾動條的變化。
                小天地，大世界是一個Web前端的技術(shù)博客。 主要是關(guān)于
                HTML 5,CSS 3,JavaScript,JQuery等。除此之外，還
                包含一些PHP語言等的實用例子。</p>
            <p>請選擇Webkit內(nèi)核的瀏覽器才可以正常的看到滾動條的變化。
                小天地，大世界是一個Web前端的技術(shù)博客。 主要是關(guān)于
                HTML 5,CSS 3,JavaScript,JQuery等。除此之外，還
                包含一些PHP語言等的實用例子。</p>
        </div>
    </div>

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

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

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

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

下面我自已嘗試著去寫的DEMO，不要嫌它太丑就好。

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

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

下面我就jQuery滾動條插件的使用作一下簡單介紹：

第一步：在內(nèi)容的頂部引入滾動條相應(yīng)的樣式表文件和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>

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

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

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

• 滾動條
• 瀏覽器