自定义谷歌浏览器滚动条的样式

在项目中常常会遇到美化浏览器自带滚动条的需求,以下是自定义谷歌浏览器滚动条的样式代码:

::-webkit-scrollbar {
	width: 5px;/*竖向滚动条的宽度*/
	height: 5px;/*横向滚动条的高度*/
}
/*滚动条轨道的样式*/
::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	-webkit-border-radius: 10px;
	border-radius: 10px;
}
/*滚动条轨道内滑块的样式*/
::-webkit-scrollbar-thumb {
	-webkit-border-radius: 10px;
	border-radius: 10px;
	background: rgba(155,155,155,0.8);
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
/*当焦点不在当前区域滑块的状态(具体为什么要加这句有点忘了,记得是跟刷新时有关)*/
::-webkit-scrollbar-thumb:window-inactive {
	background: rgba(155,155,155,0.4);
}

更多详细设置,请参考原文:
原文链接:http://www.xuanfengge.com/css3-webkit-scrollbar.html

posted @ 2018-10-13 16:23  近距离  阅读(1415)  评论(0编辑  收藏  举报