我们在互联网上都是使用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;
}

我所做的只是一个基本示例,仅基于CSS背景颜色和其他一些CSS属性,但是您可以修改滚动条从底部的托盘或按钮的默认图片替换为一些新的,当然,应该使用CSS和可爱的背景属性。