SCROLLBAR

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>SCROLLBAR</title>
</head>

<body>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>

<div id="mycontent" style="overflow:hidden; width:400px; height:300px;">
<img src="content.jpg" width="1024" height="700">
</div>

</td>
<td>


<div id="scrollbar_v" style="visibility:hidden;">
<table border="0" align="center" cellpadding="0" cellspacing="0" background="scrollbar/scrollbar_v_bg.gif">
<tr>
<td height="18" background="scrollbar/scrollbar_v_arrow1_on .gif" onmousedown="myscrollbar.startstepscroll(-1,'v',this.childNodes[0]);"><img src="scrollbar/scrollbar_v_arrow1.gif" width="16" height="18"></td>
</tr>
<tr>
<td valign="top">
<div style="width:16px;overflow:hidden;" id="mainbarbg_v" onMouseDown="myscrollbar.startmove(event,'v');">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2" id="scrollbarTop"></td>
</tr>
<tr>
<td height="2"><img src="scrollbar/scrollbar_v_bar1.gif" width="16" height="2"></td>
<td><img src="scrollbar/scrollbar_v_bar1.gif" width="16" height="2"></td>
</tr>
<tr>
<td background="scrollbar/scrollbar_v_bar2.gif" height="100" id="mainbar_v"></td>
<td background="scrollbar/scrollbar_v_bar2_on.gif"></td>
</tr>
<tr>
<td height="2"><img src="scrollbar/scrollbar_v_bar3.gif" width="16" height="2"></td>
<td><img src="scrollbar/scrollbar_v_bar3.gif" width="16" height="2"></td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td height="18" background="scrollbar/scrollbar_v_arrow2_on.gif" onmousedown="myscrollbar.startstepscroll(1,'v',this.childNodes[0]);"><img src="scrollbar/scrollbar_v_arrow2.gif" width="16" height="18"></td>
</tr>
</table>
</div>


</td>
</tr>
<tr>
<td>


<div id="scrollbar_h" class="myscrollbarstyle">
<table border="0" cellpadding="0" cellspacing="0" background="scrollbar/scrollbar_h_bg.gif">
<tr>
<td valign="top" background="scrollbar/scrollbar_h_arrow1_on.gif" onmousedown="myscrollbar.startstepscroll(-1,'h',this.childNodes[0]);"><img src="scrollbar/scrollbar_h_arrow1.gif" width="18" height="16"></td>
<td>
<div style="height:16px;overflow:hidden;" id="mainbarbg_h" onMouseDown="myscrollbar.startmove(event,'h');">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="2" id="scrollbarLeft"></td>
<td><img src="scrollbar/scrollbar_h_bar1.gif" width="2" height="16"></td>
<td width="100" background="scrollbar/scrollbar_h_bar2.gif" id="mainbar_h"></td>
<td><img src="scrollbar/scrollbar_h_bar3.gif" width="2" height="16"></td>
</tr>
<tr>
<td><img src="scrollbar/scrollbar_h_bar1.gif" width="2" height="16"></td>
<td background="scrollbar/scrollbar_h_bar2_on.gif"></td>
<td><img src="scrollbar/scrollbar_h_bar3.gif" width="2" height="16"></td>
</tr>
</table>
</div>
</td>
<td valign="top" background="scrollbar/scrollbar_h_arrow2_on.gif" onmousedown="myscrollbar.startstepscroll(1,'h',this.childNodes[0]);"><img src="scrollbar/scrollbar_h_arrow2.gif" width="18" height="16"></td>
</tr>
</table>
</div>


</td>
<td> </td>
</tr>
</table>

<script language="javascript">
/*
自定义滚动条
程序制作: 暖阳
E-mail: faisun@sina.com
网站: http://www.softpure.com
转载请注明出处
*/
function faisunScrollBar(){

this.scrollbar_v = document.getElementById('scrollbar_v');
this.scrollbarTop = document.getElementById('scrollbarTop');
this.mainbarbg_v = document.getElementById('mainbarbg_v');
this.mainbar_v = document.getElementById('mainbar_v');
this.mainbarbg_v_height = 0;
this.arrowheight = 18;
this.scrollbarTop_max = 0;
this.scrollObjectTop_max = 0;

this.scrollbar_h = document.getElementById('scrollbar_h');
this.scrollbarLeft = document.getElementById('scrollbarLeft');
this.mainbarbg_h = document.getElementById('mainbarbg_h');
this.mainbar_h = document.getElementById('mainbar_h');
this.mainbarbg_h_width = 0;
this.arrowwidth = 18;
this.scrollbarLeft_max = 0;
this.scrollObjectLeft_max = 0;

this.object_on = null;
this.mytime = setTimeout("",1);
this.scrollObject = new Object();
this.domove = null;
this.doscroll = null;

}

faisunScrollBar.prototype.startmove=function(evt,vh){
this.domove = vh;
if(vh=='v'){
this.startTop = this.scrollbarTop.clientHeight;
this.startClientY = evt.clientY;
this.object_on = this.mainbarbg_v ;
this.object_on.scrollLeft = 100;
}
else if(vh=='h'){
this.startLeft = this.scrollbarLeft.clientWidth;
this.startClientX = evt.clientX;
this.object_on = this.mainbarbg_h ;
this.object_on.scrollTop = 100;
}
}
faisunScrollBar.prototype.stopmove=function(){
this.domove = null;

this.doscroll = null;
if(this.object_on){
this.object_on.style.visibility="visible";
this.object_on.scrollTop = 0;
this.object_on.scrollLeft = 0;

}
clearTimeout(this.mytime);
}
faisunScrollBar.prototype.move=function(evt){
if(!this.domove){return false;}
if(this.domove=='v'){
var newpos = this.startTop + evt.clientY - this.startClientY ;
if(newpos<0) newpos=0;
if(newpos>this.scrollbarTop_max){
newpos = this.scrollbarTop_max;
}
this.scrollbarTop.style.height = newpos + "px";
this.scrollObject.scrollTop = this.scrollObjectTop_max*newpos/this.scrollbarTop_max;
}
else if(this.domove=='h'){
var newpos = this.startLeft + evt.clientX - this.startClientX ;
if(newpos<0) newpos=0;
if(newpos>this.scrollbarLeft_max){
newpos = this.scrollbarLeft_max;
}
this.scrollbarLeft.style.width = newpos + "px";
this.scrollObject.scrollLeft = this.scrollObjectLeft_max*newpos/this.scrollbarLeft_max;
}
}

faisunScrollBar.prototype.startstepscroll=function(direction,vh,arrow){
clearTimeout(this.mytime);
this.doscroll = vh;
if(this.doscroll=='v'){
this.scrollObject.scrollTop += 10*direction;
this.setbar_v_pos(this.scrollObject.scrollTop);
}
else if(this.doscroll=='h'){
this.scrollObject.scrollLeft += 10*direction;
this.setbar_h_pos(this.scrollObject.scrollLeft);
}
if(arrow){
this.object_on = arrow;
this.object_on.style.visibility="hidden";
}
faisunScrollBar_classObj = this;
this.mytime=setTimeout("faisunScrollBar_classObj.startstepscroll("+direction+",'"+vh+"',null);");
}

faisunScrollBar.prototype.setObject=function(obj){
this.scrollObject = obj;
faisunScrollBar_classObj=this;
this.scrollObject.onmousewheel = function(){faisunScrollBar_classObj.mousewheel(event);}
}

faisunScrollBar.prototype.mousewheel = function(evt){
this.scrollObject.scrollTop -= evt.wheelDelta/2;
this.setbar_v_pos(this.scrollObject.scrollTop);
}
faisunScrollBar.prototype.setbar_v_pos = function(scrollTop){
this.scrollbarTop.style.height = (scrollTop/this.scrollObjectTop_max*this.scrollbarTop_max)+"px";
}
faisunScrollBar.prototype.setbar_h_pos = function(scrollLeft){
this.scrollbarLeft.style.width = (scrollLeft/this.scrollObjectLeft_max*this.scrollbarLeft_max)+"px";
}

faisunScrollBar.prototype.setbar_v = function(clientHeight,scrollHeight,obj){
if(clientHeight>=scrollHeight){
this.scrollbar_v.style.visibility = "hidden";
return;
}
this.mainbarbg_v_height = clientHeight - this.arrowheight * 2;
this.mainbarbg_v.style.height = this.mainbarbg_v_height + "px";
mainbar_height = parseInt(this.mainbarbg_v_height*clientHeight/scrollHeight) - 4;
if(mainbar_height<10) mainbar_height=10;
this.mainbar_v.style.height = mainbar_height + "px";
this.scrollbarTop_max = this.mainbarbg_v_height - mainbar_height - 4;
this.scrollObjectTop_max = scrollHeight-clientHeight;
this.setObject(obj);
this.setbar_v_pos(this.scrollObject.scrollTop);
this.scrollbar_v.style.visibility = "visible";
}
faisunScrollBar.prototype.setbar_h = function(clientWidth,scrollWidth,obj){
if(clientWidth>=scrollWidth){
this.scrollbar_h.style.visibility = "hidden";
return;
}
this.mainbarbg_h_width = clientWidth - this.arrowwidth * 2;
this.mainbarbg_h.style.width = this.mainbarbg_h_width + "px";
mainbar_width = parseInt(this.mainbarbg_h_width*clientWidth/scrollWidth) - 4;
if(mainbar_width<10) mainbar_width=10;
this.mainbar_h.style.width = mainbar_width + "px";
this.scrollbarLeft_max = this.mainbarbg_h_width-mainbar_width - 4;
this.scrollObjectLeft_max = scrollWidth-clientWidth;
this.setObject(obj);
this.setbar_h_pos(this.scrollObject.scrollLeft);
this.scrollbar_h.style.visibility = "visible";
}

var myscrollbar = new faisunScrollBar();
obj = document.getElementById('mycontent');

if(window.captureEvents){
window.captureEvents(Event.MOUSEMOVE);
window.onmousemove = function(event){ myscrollbar.move(event);}
window.captureEvents(Event.MOUSEUP);
window.onmouseup = function(){myscrollbar.stopmove();}
window.captureEvents(Event.ONLOAD);
window.onload = function(){
myscrollbar.setbar_v(obj.clientHeight,obj.scrollHeight,obj);
myscrollbar.setbar_h(obj.clientWidth,obj.scrollWidth,obj);
}
}else{
document.onmousemove = function(){ myscrollbar.move(event);}
document.onmouseup = function(){myscrollbar.stopmove();}
document.onselectstart=function(){if(myscrollbar.domove||myscrollbar.doscroll){return false;}};
document.body.onload = function(){
myscrollbar.setbar_v(obj.clientHeight,obj.scrollHeight,obj);
myscrollbar.setbar_h(obj.clientWidth,obj.scrollWidth,obj);
}
}

</script>
</body>
</html>