ie和chrome 改變滾動條的樣式

改變滾動條樣式在ie和chrome 中不一樣

在chrome 中：

::-webkit-scrollbar 滾動條整體部分

::-webkit-scrollbar-thumb  滾動條裡面的小方塊，能向上向下移動（或往左往右移動，取決于是垂直滾動條還是水準滾動條）

::-webkit-scrollbar-track  滾動條的軌道（裡面裝有Thumb）

::-webkit-scrollbar-button 滾動條的軌道的兩端按鈕，允許通過點選微調小方塊的位置。

::-webkit-scrollbar-track-piece 内層軌道，滾動條中間部分（除去）

::-webkit-scrollbar-corner 邊角，即兩個滾動條的交彙處

::-webkit-resizer 兩個滾動條的交彙處上用于通過拖動調整元素大小的小控件

/*定義滾動條高寬及背景 高寬分别對應橫豎滾動條的尺寸*/ 
::-webkit-scrollbar 
{ 
    width: 16px; 
    height: 16px; 
    background-color: #F5F5F5; 
} 
   
/*定義滾動條軌道 内陰影+圓角*/ 
::-webkit-scrollbar-track 
{ 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px; 
    background-color: #F5F5F5; 
} 
   
/*定義滑塊 内陰影+圓角*/ 
::-webkit-scrollbar-thumb 
{ 
    border-radius: 10px; 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); 
    background-color: #555; 
}
           

在ie中就隻能改變滾動條的顔色，并不能改變大小，該死的ie

div{
            width: 200px;
            height: 200px;
            padding: 20px;
            overflow: auto;
            /*三角箭頭的顔色*/
            scrollbar-arrow-color: #f00;
            /*滾動條滑塊按鈕的顔色*/
            scrollbar-face-color: #ff0;
            /*滾動條整體顔色*/
            scrollbar-highlight-color: #333;
            /*滾動條陰影*/
            scrollbar-shadow-color: #ccc;
            /*滾動條軌道顔色*/
            scrollbar-track-color: #666;
        }
           

改變寬度的思路：  父元素 設定100%，超出隐藏；子元素設定102%；這樣也能達到想要的效果