js写的一个滚动条效果类，有感兴趣的加上鼠标滑轮效果


var vscroll = function(){
var me = this;
me.point = document.getElementById('point');
me.point.style.height = '8px';
me.rail = document.getElementById('process');
me.roll = document.getElementById('left');
me.content = document.getElementById('content');
me.isIE = document.all ? true : false;

me.allowMove = false;
//me.init();};
vscroll.prototype = { 
init:function(rail_height){
var me = this;
me.point.style.top = '0px';
me.rail.style.height = rail_height+'px';
me.mouseY = 0;
me.railHeight = rail_height;
if(document.addEventListener){
me.point.addEventListener('mousedown',function(evt){
me.moveInit.call(me,evt || window.event);

});
document.addEventListener('mousemove',function(evt){
me.moveIng.call(me,evt || window.event);

});
document.addEventListener('mouseup',function(evt){
me.moveEnd.call(me,evt || window.event);

});
}else if(document.attachEvent){
me.point.attachEvent('onmousedown',function(evt){
me.moveInit.call(me,evt || window.event);

});
document.attachEvent('onmousemove',function(evt){
me.moveIng.call(me,evt || window.event);

});
document.attachEvent('onmouseup',function(evt){
me.moveEnd.call(me,evt || window.event);

}); }
},

moveInit:function (evt){
var evt = evt || window.event;
var me = this;

me.pointY = parseInt(me.point.style.top);//point初始位置
me.mouseY = me.isIE ? parseInt(evt.clientY) : parseInt(evt.pageY);//鼠标初始位置y轴
me.allowMove = true;
},
moveIng:function(evt){
var evt = evt || window.event;
var me = this;
var p_y;
if(me.allowMove){
moveY = me.isIE ? parseInt(evt.clientY) : parseInt(evt.pageY);//当前鼠标位置
p_y = moveY - me.mouseY + me.pointY;

if(p_y < 0){
p_y = 0;

}else if(p_y > me.railHeight - parseInt(me.point.style.height)){
p_y = me.railHeight - parseInt(me.point.style.height);

}
me.point.style.top = p_y + 'px';
//计算滚动大小
var all_h = me.railHeight - parseInt(me.point.style.height);//最大值
var currentPercent = new Number(p_y / all_h).toFixed(2);
var scrollTop = (me.content.clientHeight - me.roll.clientHeight) * currentPercent;

me.roll.scrollTop = scrollTop;
}
},
moveEnd:function(evt){
var evt = evt || window.event;
var me = this;
me.allowMove = false;
}}////HTML
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>roll</title>
<style>
body{
width:100%;
height:100%;
margin:auto;
}
#box{
margin:20px auto;
width:250px;
height:500px;
line-height:22px;

border:1px solid #999;
}
#left{
width:216px;
height:500px;
z-index:0;
float:left;
overflow:hidden;
border:1px solid red;
}
ul,li{list-style:none;float:left;margin:auto;padding:0px;}
#content{
background:#eee;
width:100%;
height:auto;

}
#content ul{
width:100%;
height:100%;

}
#content ul li {
width:100%;
height：20px;
line-height:20px;
}
#right{
width:30px;
height:400px;
float:right;
z-index:10;
border:1px solid #ccc;
}
#process{
width:4px;
height:400px;
margin:auto;
position:relative;
background:#ddd;
}
#point{
width:8px;
height:8px;
border:0px solid #ccc;
position:absolute;
left:-2px;
top:10px;
background:#000;
}
</style>
</head>
<body>
<div id="box">
<div id="left">
<div id="content">
<ul>
<li>1111</li>
<li>2222</li><li>1111</li>
<li>2222</li><li>1111</li>
<li>2222</li><li>1111</li>
<li>2222</li><li>1111</li>
<li>2222</li><li>1111</li>
<li>2222</li><li>1111</li>
<li>2222</li><li>1111</li>
<li>2222</li><li>1111</li>
<li>2222</li><li>1111</li>
<li>2222</li>
<li>1111</li>
<li>2222</li>
<li>1111</li>
<li>2222</li>
<li>1111</li>
<li>2222</li><li>1111</li>
<li>2222</li><li>1111</li>
<li>2222</li><li>1111</li>
<li>2222</li>
<li>1111</li>
<li>额鹅鹅鹅</li><li>1111</li>
<li>2222</li>
<li>1111</li>
<li>2222</li>
<li>1111</li>
<li>2222</li>
<li>1111</li>
<li>2222</li><li>1111</li>
<li>2222</li><li>1111</li>
<li>2222</li><li>1111</li>
<li>2222</li>
<li>1111</li>
<li>额鹅鹅鹅</li>
</ul>
<div style="clear:both"></div>
</div>
</div>
<div id="right">
<div id="process">
<div id="point"></div>
</div>
</div>
</div><script src="vroll.js"></script>
<script>
var croll = new vscroll();
croll.init(400);
</script>
</body>
</html>