關於ie，火狐，谷歌瀏覽器滾動條的隱藏以及自定義樣式

最近做了一個項目，要求各個瀏覽器統一滾動條的樣式，不顯示滾動條，但是不影響鼠標的滑動事件。

查了很多資料，ie和谷歌都是可以自定義滾動條樣式的，但是ie只能改變顏色，並不能修改寬度，圓角之類的。谷歌就比較隨和了，可以自定義樣式。

谷歌自定義滾動條樣式代碼：

/*----- 滾動條 -------*/
::-webkit-scrollbar-track { background-color: rgba(0,0,0,0.2);  }
::-webkit-scrollbar {  width: 0px;height:8px;  background-color: #F5F5F5;border-radius: 5px;  }
::-webkit-scrollbar-thumb { /* */background: #0C4EA2;border-radius: 5px; }
::-webkit-scrollbar-corner{ background-color: #F5F5F5;}

ie隱藏滾動條樣式代碼：
 html {
        /*隱藏滾動條，當IE下溢出，仍然可以滾動*/
        -ms-overflow-style:none;
        /*火狐下隱藏滾動條*/
        overflow:-moz-scrollbars-none;
    }
    /*Chrome下隱藏滾動條，溢出可以透明滾動*/
    html::-webkit-scrollbar{width:0px}

既然，火狐不允許自定義滾動條樣式，然后又長的那么丑，那還不如就隱藏了把，對於上面的代碼，是隱藏不了火狐的滾動條的，經查資料，
看到一個比較投機的方法（當然也適用於其他瀏覽器），方法如下：

當我們的內容超出了我們的div，往往會出現滾動條，影響美觀。

尤其是當我們在做一些導航菜單的時候。滾動條一出現就破壞了UI效果。  我們不希望出現滾動條，也不希望超出去的內容被放逐，就要保留鼠標滾動的效果。

 

這里介紹一個簡單的方法。   大體思路是在div外面再套一個div。這個div設置overflow:hidden。  

而內容div設置 overflow-y: scroll;overflow-x: hidden;

然后再設置外層div的width小於內層div的width。

 

這個內層div其實是會出現滾動條的，所以不影響鼠標的滾動效果，而且我們看不到滾動條了。

內層div效果：

套上外層div效果后：

代碼：

<div class= "nav_wrap">
    <ul class= "nav_ul">
        <li class="nav_li">我是菜單1</li>
        <li class="nav_li">我是菜單2</li>
    </ul>
</div>

 

.nav_wrap{  
    height: 400px;  
    width: 200px;  
    overflow: hidden;  
    border: 1px solid #ccc;  
    margin: 20px auto;  
}  
.nav_ul{  
    height: 100%;  
    width: 220px;  
    overflow-y: auto;  
    overflow-x: hidden;  
}  
.nav_li{  
    border: 1px solid #ccc;  
    margin: -1px;  
    height: 40px;  
    line-height: 40px;  
    text-align: center;  
    font-size: 12px;  
    width: 200px;  
}  
.btn_wrap{  
    text-align: center;  
}  

看到網上資料說，針對火狐瀏覽器，還可以使用插件來解決。