css样式定义页面滚动条样式（-webkit-scrollbar）

当内容超出容器，就会产生滚动条，滚动条由轨道和滑块两部分组成。

滚动条的css样式主要有三部分组成：

　　1、::-webkit-scrollbar 定义了滚动条整体的样式；

       2、::-webkit-scrollbar-thumb 滑块部分；

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

呈现效果如下

转载于:https://juejin.im/post/5ce4f56d51882533182d79ae