最近在浏览博客大神迷津渡口的网站时候,给人一种眼前一亮的感觉,虽然这是利用emlog平台搭建的网站,但是简洁不失简单:极其精美的主页配色,随处可见的动态展现,精心设计的的功能布局,让人看上一眼就印象深刻,这么舒服的网页真让人羡慕不已。 在这之中,我也注意到了两点细节:鼠标指针和滚动条的样式变化。这使我很惊奇,我以前从来不知道在网页上鼠标指针样式和滚动条的样式可以随意修改。(当然,经过我的测试,滚动条并不支持IE浏览器)关于滚动条部分的实例,我发现这是通过CSS样式表实现的。于是我把关于滚动条部分的样式复制下来,经过自己的修改,有了以下代码。
//scrollbar.css
::-webkit-scrollbar {//滚动条整体部分
	width:10px;
	height:10px
}
::-webkit-scrollbar-button {//滚动条两端按钮
	width:0;
	height:0
}
::-webkit-scrollbar-thumb {//滚动条内滑块
	-webkit-border-radius:8px;
	border-radius:8px;
	background-color:rgba(0,0,0,0.2)
}
::-webkit-scrollbar-thumb:hover {//滚动条内滑块覆盖
	-webkit-border-radius:8px;
	border-radius:8px;
	background-color:rgba(0,0,0,0.5)
}
::-webkit-scrollbar-track,//滚动条的轨道(里面装有Thumb)
::-webkit-scrollbar-thumb {
	border-right:1px solid transparent;
	border-left:1px solid transparent
}
::-webkit-scrollbar-track:hover {//滚动条轨道覆盖
	background-color:rgba(0,0,0,0.15)
}
//以下是滚动条两端箭头样式选择
::-webkit-scrollbar-button:start {
	width:10px;
	height:10px;
	background:url("http://arrow.png") no-repeat 0 0
}
::-webkit-scrollbar-button:start:hover {
	background:url("http://arrow.png") no-repeat -15px 0
}
::-webkit-scrollbar-button:start:active {
	background:url("http://arrow.png") no-repeat -30px 0
}
::-webkit-scrollbar-button:end {
	width:10px;
	height:10px;
	background:url("http://arrow.png") no-repeat 0 -18px
}
::-webkit-scrollbar-button:end:hover {
	background:url("http://arrow.png") no-repeat -15px -18px
}
::-webkit-scrollbar-button:end:active {
	background:url("http://arrow.png") no-repeat -30px -18px
}
显而易见,这是webkit内核专用语法。所以这段代码只会在使用了基于webkit内核的浏览器上运行。