css轻松自定义滚动条

直接上代码

/*滚动条整体部分*/
*::-webkit-scrollbar{
	width: 8px;
	height: 8px;
	background-color: transparent;
}
/*滚动条两端的按钮*/
*::-webkit-scrollbar-button{
	width: 0px;
	height: 0px;
}
/*滚动条里面可以拖动的那部分*/
*::-webkit-scrollbar-thumb{
	border-radius: 4px;
	background-color: #C1C1C1;
}
/*滚动条里面可以拖动的那部分移入效果*/
*::-webkit-scrollbar-thumb:hover{
	background-color: #A8A8A8;
} 
/*出现横竖滚动条时的右下角*/
::-webkit-scrollbar-corner{
	background-color: transparent;
}
/*外层轨道*/
*::-webkit-scrollbar-track{

}
/*内层轨道*/
*::-webkit-scrollbar-track-piece{

}

实际显示效果如下，本自定义滚动条尽量贴近谷歌自带滚动条颜色，修改了颜色，宽度和圆角弧度。