修改瀏覽器默認滾動條效果

• 修改某個div的滾動條默認樣式
  

#search-list::-webkit-scrollbar-track<br>
{
	border-radius: 10px;<br>
	background-color: #F5F5F5;<br>
}

#search-list::-webkit-scrollbar{<br>
	width: 14px;
	background-color: #F5F5F5;
}

#search-list::-webkit-scrollbar-thumb{<br>
	border-radius: 12px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #555;
}
複製代碼

• 滾動條組成
  ::-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: #ff0;
    /*滾動條滑塊按鈕的顏色*/
    scrollbar-face-color: #f00;
    /*滾動條總體顏色*/
    scrollbar-highlight-color: #333;
    /*滾動條陰影*/
    scrollbar-shadow-color: #ccc;
    /*滾動條軌道顏色*/
    scrollbar-track-color: #666;
}
複製代碼

• 火狐瀏覽器未開放針對滾動條樣式的設定，而且也不支持css代碼關於這些瀏覽器屬性的控制