css樣式定義頁面滾動條樣式（-webkit-scrollbar）

當內容超出容器，就會產生滾動條，滾動條由軌道和滑塊兩部分組成。

滾動條的css樣式主要有三部分組成：

　　一、::-webkit-scrollbar 定義了滾動條總體的樣式；

       二、::-webkit-scrollbar-thumb 滑塊部分；

　    三、::-webkit-scrollbar-thumb 軌道部分；

以豎滾動條：overflow-y:auto;爲例；

<div class="con01"><div>複製代碼

.con01{
    width:600px;
    height:350px;
    overflow:hidden;
    overflow-y:auto;
}
/*定義滾動條高寬及背景 高寬分別對應橫豎滾動條的尺寸*/  
.con01::-webkit-scrollbar  
{  
    width: 10px;  /*滾動條寬度*/
    height: 10px;  /*滾動條高度*/
}  
				  
/*定義滾動條軌道 內陰影+圓角*/  
.con01::-webkit-scrollbar-track  
{  
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);  
    border-radius: 10px;  /*滾動條的背景區域的圓角*/
    background-color: #d8cfbf;/*滾動條的背景顏色*/ 
}  
				  
/*定義滑塊 內陰影+圓角*/  
.con01::-webkit-scrollbar-thumb  
{  
    border-radius: 10px;  /*滾動條的圓角*/
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);  
    background-color: #9f834d; /*滾動條的背景顏色*/
}
複製代碼

呈現的效果爲：

此外，滾動條的滑塊不只能夠填充顏色還能夠填充圖片，以下：

.con01::-webkit-scrollbar-thumb  
{  
border-radius: 10px;  /*滾動條的圓角*/
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);  
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
background-color: #FFC62C; /*滾動條的背景顏色*/
}  
複製代碼

呈現效果以下