webkit自定义进度条

效果如图。

CSS代码如下：

position: relative; height: 650px; overflow-y: scroll; overflow-x: hidden;

/*scrollbar for chrome*/
/* 设置滚动条的样式 */
::-webkit-scrollbar {
    width: 13px;
    margin-left: 25px;
    position: absolute;
}
/* 滚动槽 */
::-webkit-scrollbar-track {
    display: none;
}
/*滚动槽外层轨道*/
::-webkit-scrollbar-track-piece{
<span style="white-space:pre">	</span>background: url(../img/vertical_line.png) no-repeat;
<span style="white-space:pre">	</span>background-size: 12px 650px;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
<span style="white-space:pre">	</span>height: 135px;
    background: #4B4B4B;
}
::-webkit-scrollbar-thumb:window-inactive {
    background: #E44116;
}

滚动槽外层轨道（垂直居中竖线）我是做了一张12*650的png图片作为背景图片放上去的，也可以用linear-gradient属性实现：

/*滚动槽外层轨道*/
::-webkit-scrollbar-track-piece{
	/*background: url(../img/vertical_line.png) no-repeat;*/
	/*chrom*/
	background: -webkit-linear-gradient(left, transparent 6px, #4B4B4B 6px);
	/*firefox*/
	background: -moz-linear-gradient(left, transparent 6px, #4B4B4B 6px);
	/*IE*/
	background: -o-linear-gradient(left, transparent 6px, #4B4B4B 6px);
	background-size: 8px 100%;
}

兼容的浏览器包括：chrome /safari /firefox /opera /360 等较新版本，IE所有版本浏览器都无法正常显示。

更新：不支持firefox

关于WebKit自定义进度条各个属性的详细参数请参考：CSS设置滚动条样式，获取更多案例：Customizing Browser Scroll Bar With CSS / JQuery

推荐学习linear-gradient的文章：使用CSS3绘制网格线，非常实用，另外还有linear-gradient属性详解：CSS3线性渐变