使用css3自定义滚动条样式

我们在互联网上都是使用web浏览器来浏览。你们中的大多数(更具体地说,根据我的分析65%)使用Chrome和Safari浏览网站。这两个浏览器有一些共同点:他们都是建立在WebKit平台,或者换句话说,他们是WebKit浏览器。尽管谷歌和苹果有了一些相当不错的UI元素,但有些人认为,还有更多开发的空间。

你知道吗,你可以DIY一个滚动条的样式。假设你已经建立了一个伟大的网站,但你想让它更美观。改变滚动条的方式是可以改善布局的步骤之一。
自定义滚动条是很容易的,是基于一个纯CSS解决方案,但是有一个问题:自定义滚动条只适用于WebKit浏览器。但是,覆盖超过60%的浏览器市场无疑是一个伟大的成就。
我建立了一个简单的例子,解释了你可以改变滚动条看起来他们方式但在代码之前,这里有我的常规浏览器滚动条之间的差异,我免费送给你:

让我们来看看代码：

::-webkit-scrollbar {
	width: 8px;
}
::-webkit-scrollbar-button {
	width: 8px;
	height:5px;
}
::-webkit-scrollbar-track {
	background:#eee;
	border: thin solid lightgray;
	box-shadow: 0px 0px 3px #dfdfdf inset;
	border-radius:10px;
}
::-webkit-scrollbar-thumb {
	background:#999;
	border: thin solid gray;
	border-radius:10px;
}
::-webkit-scrollbar-thumb:hover {
	background:#7d7d7d;
}