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; /*滚动条的背景颜色*/
}  
复制代码

呈现效果以下