我们常会遇到滚动条的样式需要根据psd设计稿进行修改，如下所示：有两种修改滚动条默认样式的方法。

方法一：

/* 滚动条样式 start */
.jsyzmx .macro-table .res_data::-webkit-scrollbar{
	/*滚动条整体样式*/
	width:10px;
	height:10px;
}
/* 小方块 */
.jsyzmx .macro-table .res_data::-webkit-scrollbar-thumb{
	border-radius:15px;
	-webkit-box-shdow:inset 0 0 15px rgba(172,243,255,1);
	background:rgba(172,243,255,1);
}
/* 轨道 */
.jsyzmx .macro-table .res_data::-webkit-scrollbar-track{
	border-radius:15px;
	-webkit-box-shdow:inset 0 0 15px rgba(24,51,72,1);
	background:rgba(24,51,72,1);
}
/* 滚动条样式 end */

---

方法二：

/* 滚动条默认样式 */
.list-item-course::-webkit-scrollbar {/*滚动条整体样式*/
    width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
}
.list-item-course::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
    border-radius: 10px;
     -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: rgba(157, 165, 183, 0.7);
}
.list-item-course::-webkit-scrollbar-track {/*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    border-radius: 10px;
    background: #EDEDED;
}
.list-item-course::-webkit-scrollbar-thumb:hover {
    background: #888888;	/*鼠标移上滚动条样式*/
}

兼容性问题(IE)：

/* IE比较少，都以颜色为主 */ 

1.scrollbar-arrow-color: color; /三角箭头的颜色/ 
2.scrollbar-face-color: color; /立体滚动条的颜色（包括箭头部分的背景色）/ 
3.scrollbar-3dlight-color: color; /立体滚动条亮边的颜色/ 
4.scrollbar-highlight-color: color; /滚动条的高亮颜色（左阴影？）/ 
5.scrollbar-shadow-color: color; /立体滚动条阴影的颜色/ 
6.scrollbar-darkshadow-color: color; /立体滚动条外阴影的颜色/ 
7.scrollbar-track-color: color; /立体滚动条背景颜色/ 
8.scrollbar-base-color:color; /滚动条的基色/

/* 简易版本 */

scrollbar-track-color       /*滚动条里面轨道*/
scrollbar-arrow-color       /* 三角箭头的颜色 */
scrollbar-shadow-color      /* 立体滚动条阴影的颜色 */
scrollbar-face-color        /* 立体滚动条里面小方块 */


/* 核心代码 */
#scroll-2{
    width:200px;
    height:200px;
    overflow:auto;
	margin-bottom: 20px;
}
#scroll-2 div{
	width:400px;
	height:400px;
}
#scroll-2::-webkit-scrollbar{
	width:4px;
	height:4px;
}
#scroll-2::-webkit-scrollbar-track{
	background: #f6f6f6;
	border-radius:2px;
}
#scroll-2::-webkit-scrollbar-thumb{
	background: #aaa;
	border-radius:2px;
}
#scroll-2::-webkit-scrollbar-thumb:hover{
	background: #747474;
}
#scroll-2::-webkit-scrollbar-corner{
	background: #f6f6f6;
}