纯CSS修改浏览器的默认滚动条样式

Left-Style

于 2016-03-08 10:59:44 发布

阅读量5k

点赞数

分类专栏： CSS 文章标签： css 浏览器

本文链接：https://blog.csdn.net/kevinhjing/article/details/50825548

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一方面利益于CSS强大的功能，一方面利益于浏览器日益强大的解析能力和开放的心态，webkit内核的浏览器允许网页中的JS代码改变滚动条的样式。代码如下：

::-webkit-scrollbar-track-piece {
	background-color:#f5f5f5;
	border-left:1px solid #d2d2d2;
}
::-webkit-scrollbar {
	width:13px;
	height:13px;
}
::-webkit-scrollbar-thumb {
	background-color:#c2c2c2;
	background-clip:padding-box;
	border:1px solid #979797;
	min-height:28px;
}
::-webkit-scrollbar-thumb:hover {
	border:1px solid #636363;
	background-color:#929292;
}

可以根据需要调整以上代码的数值。具体的说明网上一大堆，在此不赘。