简单的自定义滚动条样式插件：jScrollPane

[javascript]代码库

官网：http://jscrollpane.kelvinluck.com/


引入相关文件：
	<link type="text/css" href="jquery.jscrollpane.css" rel="stylesheet" media="all" />//插件自带滚动条样式文件
	<script type="text/javascript" src="jquery.min.js"></script> 
	<script type="text/javascript" src="jquery.mousewheel.js"></script> 
	<script type="text/javascript" src="jquery.jscrollpane.min.js"></script>
	<script type="text/javascript">
		$(function(){ 
			$('.scroll-pane').jScrollPane(); //调用的名称为外部显示滚动条的DIV
		}) 
	</script>


HTML:
	<div class="scroll-pane" style="height:300px;width:500px;overflow:auto;">//此DIV显示滚动条
		<div id="#cont" style="height:3000px;width:100%;"></div>
	</div>


jquery.jscrollpane.css内部样式：
.jspContainer
{
	overflow: hidden;
	position: relative;
}

.jspPane
{
	position: absolute;
}

/*整体样式*/
.jspVerticalBar
{
	position: absolute;
	top: 0;
	right: 0;
	width: 16px;
	height: 100%;
}

.jspHorizontalBar
{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 16px;
	background: red;
}

.jspCap
{
	display: none;
}

.jspHorizontalBar .jspCap
{
	float: left;
}

/*滚动条底条样式*/
.jspTrack
{
	background: #fff;
	position: relative;
	width: 3px;
}

/*滚动条滑动块样式*/
.jspDrag
{
	background: #7db5fa;
	position: relative;
	top: 0;
	left: 0;
	width: 16px;
	margin-left: -6px;
	cursor: pointer;
}

.jspHorizontalBar .jspTrack,
.jspHorizontalBar .jspDrag
{
	float: left;
	height: 100%;
}

.jspArrow
{
	background: #50506d;
	text-indent: -20000px;
	display: block;
	cursor: pointer;
	padding: 0;
	margin: 0;
}

.jspArrow.jspDisabled
{
	cursor: default;
	background: #80808d;
}

.jspVerticalBar .jspArrow
{
	height: 16px;
}

.jspHorizontalBar .jspArrow
{
	width: 16px;
	float: left;
	height: 100%;
}

.jspVerticalBar .jspArrow:focus
{
	outline: none;
}

.jspCorner
{
	background: #eeeef4;
	float: left;
	height: 100%;
}

[代码运行效果截图]

[源代码打包下载]