Chrome自定义滚动条代码

2

这段代码是从网易邮箱里扣出来的,原来的代码是赋给DIV的,Chrome不允许scrollbar使用透明属性,修改了一下,效果如图

scrollbar

CSS代码

::-webkit-scrollbar {
	width: 8px;
	height: 8px;
	background-color:#fff;
}
::-webkit-scrollbar-track {
	background-color:#fff;
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0)
}
::-webkit-scrollbar-track:hover {
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.4);
	background-color:#fefefe;
}
::-webkit-scrollbar-track:active {
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.4);
	background-color:#f0f0f0;
}
::-webkit-scrollbar-thumb {
	background-color: rgba(0,0,0,0.05);
	border-radius: 10px;
	-webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,.1)
}
::-webkit-scrollbar-thumb:hover {
	background-color: rgba(0,0,0,0.4);
	-webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,.1)
}
::-webkit-scrollbar-thumb:active {
	background: rgba(0,0,0,0.6)
}

仅对Chrome有效,微软的OutLook也使用了类似的代码,当然也是仅仅针对Chrome写的代码,但不知道为什么不让自己的浏览器也支持,IE的自定义滚动条还是5.5那时候的彩色方块..

共 2 条评论

  1. 回复

    博主的滚动条比网易更好看,能贴出来么。。。

    • 回复

      用CHROME右键审查元素就能看到了.

发表评论

您的邮箱不会公开,当您的评论有新的回复时,会通过您填写的邮箱向您发送评论内容。 必填字段 *

为何看不到我发布的评论?

正在提交, 请稍候...