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


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

::-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


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM