css设置滚动条样式

        在设计网页时，为了保证页面的整体风格，通常需要重新设置滚动条的样式，特别是在做后台管理系统时经常会用到，下面以一个简单的样式记录一下如何通过css重设滚动条样式：

/*
	滚动条整体部分
	设置滚动条宽高及背景
	宽对应竖滚动条的尺寸
	高对应横滚动条的尺寸
*/
::-webkit-scrollbar {
	width: 5px;
	height: 5px;
	background-color: #F5F5F5;
}

/* 
	滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条） 
	设置滑块内阴影及圆角
*/
::-webkit-scrollbar-thumb {
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
	background-color: #bdbdbd;
}

/* 
	滚动条的轨道（里面装有Thumb） 
	设置滚动条轨道内阴影及圆角
*/
::-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:hover {
	border-radius: 5px;
	-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
	background: rgba(0, 0, 0, 0.4);
}

/* 附其他相关设置选择器 */
/* 
	滚动条的轨道的两端按钮，允许通过点击微调小方块的位置 
*/
::-webkit-scrollbar-button {}

/* 
	内层轨道，滚动条中间部分（除去） 
*/
::-webkit-scrollbar-track-piece {}

/* 
	边角，即两个滚动条的交汇处 
*/
::-webkit-scrollbar-corner {}

/* 
	两个滚动条的交汇处上用于通过拖动调整元素大小的小控件 
*/
::-webkit-resizer {}

/* 兼容IE */
html {
	/*滚动条颜色*/
	scrollbar-face-color: #bfbfbf;
	scrollbar-highlight-color: #000;
	scrollbar-3dlight-color: #000;
	scrollbar-darkshadow-color: #000;
	/*滑块边色*/
	scrollbar-Shadow-color: #adadad;
	/*箭头颜色*/
	scrollbar-arrow-color: rgba(0, 0, 0, 0.4);
	/*背景颜色*/
	scrollbar-track-color: #eeeeee;
}