-webkit-scrollbar

-webkit-scrollbar

在IE中可以自定义滚动条的样式 ，基于webkit的浏览器现在也可以自定义其样式：

<style>
::-webkit-scrollbar { /* 1 */ }
::-webkit-scrollbar-button { /* 2 */ }
::-webkit-scrollbar-track { /* 3 */ }
::-webkit-scrollbar-track-piece { /* 4 */ }
::-webkit-scrollbar-thumb { /* 5 */ }
::-webkit-scrollbar-corner { /* 6 */ }
::-webkit-resizer { /* 7 */ }
</style>

 

 例子：

::-webkit-scrollbar {
	width: 12px;
}
::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
	-webkit-border-radius: 10px;
	border-radius: 10px;
	border:1px solid #666666
}
::-webkit-scrollbar-thumb {
	-webkit-border-radius: 10px;
	border-radius: 10px;
	background: rgba(255, 0, 0, 0.8);
	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
	background: rgba(255, 0, 0, 0.4);
}
.test {
	width:100px;
	height:200px;
	overflow:scroll;
	border:1px solid #666666;
}
<div class="test">kfalsdfjlasjldf</div>