did it anyway
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--
// by Vic Phillips (18-March-2006) http://www.vicsjavascripts.org.uk
// Functional Code - NO NEED to Change
var zxcOOPCnt=0;
function zxcInitMess(zxcid,zxca){
var zxcobj=document.getElementById(zxcid);
if (!zxcobj.messoop){
zxcobj.messoop=new zxcMessOOP(zxcobj,zxca);
if (zxca){ zxcobj.messoop.scroll(); }
}
}
function zxcMessOOP(zxcid,zxca){
this.ref='zxcMessOOP'+zxcOOPCnt;
window[this.ref]=this;
this.obj=(zxcid);
this.obj.messoop=this;
this.scrollobj=this.obj.getElementsByTagName('DIV')[0];
if (zxca){ this.scrollobj.style.top=(this.obj.offsetHeight)+'px'; }
this.max=this.scrollobj.offsetHeight-this.obj.offsetHeight;
this.to=null;
this.delay=100;
this.slider=this.obj.getElementsByTagName('DIV')[1];
if (this.slider){
if (this.slider.offsetLeft>this.obj.offsetWidth){
this.slider.style.left=(zxcPos(this.obj)[0]+this.slider.offsetLeft)+'px';
this.slider.style.top=(zxcPos(this.obj)[1]+this.slider.offsetTop)+'px';
this.slider.parentNode.removeChild(this.slider);
document.getElementsByTagName('BODY')[0].appendChild(this.slider);
}
if (zxca){
zxcVertScrollBar(this.slider,this.scrollobj.offsetHeight);
}
else {
zxcVertScrollBar(this.slider,this.scrollobj.offsetHeight-this.obj.offsetHeight);
var zxcpos=-(this.scrollobj.offsetTop-this.obj.offsetHeight);
var zxcmax=this.max+this.obj.offsetHeight;
this.slider.slider.style.top=(this.slider.min+this.slider.travel*(zxcpos/zxcmax))+'px';
}
this.slider.responce=this.sliderFun;
this.slider.scroll=this.scrollobj;
this.slider.pheight=this.obj.offsetHeight;
this.slider.auto=zxca;
}
zxcOOPCnt++;
}
zxcMessOOP.prototype.sliderFun=function(zxcr){
if (this.auto){ this.scroll.style.top=(this.pheight-zxcr)+'px'; }
else { this.scroll.style.top=(-zxcr)+'px'; }
}
zxcMessOOP.prototype.setTimeOut=function(zxcf,zxcd){
this.to=setTimeout("window."+this.ref+"."+zxcf,zxcd);
}
zxcMessOOP.prototype.scroll=function(){
this.scrollobj.style.top=(parseInt(this.scrollobj.style.top)-1)+'px';
this.pos=parseInt(this.scrollobj.style.top);
if (this.pos<=-this.max){
this.scrollobj.style.top=(this.obj.offsetHeight)+'px';
}
this.setTimeOut("scroll();",this.delay);
}
function zxcStopSOOP(zxcobj){
clearTimeout(zxcobj.messoop.to);
var zxcpos=-(zxcobj.messoop.pos-zxcobj.messoop.obj.offsetHeight);
var zxcmax=zxcobj.messoop.max+zxcobj.messoop.obj.offsetHeight;
zxcobj.messoop.slider.slider.style.top=(zxcobj.messoop.slider.min+zxcobj.messoop.slider.travel*(zxcp os/zxcmax))+'px';
zxcobj.messoop.slider.style.visibility='visible';
}
function zxcStartSOOP(zxcobj){
zxcobj.messoop.slider.style.visibility='hidden';
zxcobj.messoop.scroll();
}
function zxcStopOOP(zxcobj){
zxcobj.style.overflow='auto';
zxcobj.messoop.scrollobj.style.width=(zxcobj.offsetWidth-20)+'px';
clearTimeout(zxcobj.messoop.to);
}
function zxcStartOOP(zxcobj){
zxcobj.style.overflow='hidden';
zxcobj.messoop.scrollobj.style.width=(zxcobj.offsetWidth)+'px';
zxcobj.messoop.scrollobj.style.top=(zxcobj.messoop.pos)+'px';
zxcobj.messoop.scroll();
}
//-->
</script>
</head>
<body onload="zxcInitMess('M2','Auto');zxcInitMess('M1');">
<div id="M1" style="position:relative;overflow:hidden;width:200px;height:100px;border:solid black 1px;background-color:#FFCC66;"
>
<div style="position:absolute;left:0px;top:-100px;width:200px;background-color:#FFFFCC;">
0 Some Text<br>
1 Some Text<br>
2 Some Text<br>
3 Some Text<br>
4 Some Text<br>
5 Some Text<br>
6 Some Text<br>
7 Some Text<br>
9 Some Text<br>
10 Some Text<br>
11 Some Text<br>
12 Some Text<br>
13 Some Text<br>
14 Some Text<br>
15 Some Text<br>
16 Some Text<br>
17 Some Text<br>
19 Some Text<br>
20 Some Text<br>
21 Some Text<br>
22 Some Text<br>
23 Some Text<br>
24 Some Text<br>
25 Some Text<br>
26 Some Text<br>
27 Some Text<br>
29 Some Text<br>
<br>
<br>
</div>
<div style="position:absolute;visibility:visible;overflow:hidden;left:205px;top:0px;width:10px;height:200px;font-size:12px;background-color:red;border:solid black 1px;" >
<div style="top:0px;left:0px;width:20px;height:15px;background-color:silver;" ></div>
<div style="top:20px;left:0px;width:20px;height:15px;background-color:gray;" ></div>
<div style="top:0px;left:0px;width:20px;height:15px;background-color:gray;" ></div>
</div>
</div>
</div>
<br>
<br>
<div id="M2" style="position:relative;overflow:hidden;width:200px;height:200px;border:solid black 1px;background-color:#FFCC66;"
onmouseover="zxcStopSOOP(this); "
onmouseout="zxcStartSOOP(this); "
>
<div style="position:absolute;left:0px;top:0px;width:200px;background-color:#FFFFCC;">
0 Some More Text<br>
1 Some More Text<br>
2 Some More Text<br>
3 Some More Text<br>
4 Some More Text<br>
5 Some More Text<br>
6 Some More Text<br>
7 Some More Text<br>
9 Some More Text<br>
10 Some More Text<br>
11 Some More Text<br>
12 Some More Text<br>
13 Some More Text<br>
14 Some More Text<br>
15 Some More Text<br>
16 Some More Text<br>
17 Some More Text<br>
19 Some More Text<br>
20 Some More Text<br>
21 Some More Text<br>
22 Some More Text<br>
23 Some More Text<br>
24 Some More Text<br>
25 Some More Text<br>
26 Some More Text<br>
27 Some More Text<br>
29 Some More Text<br>
<br>
<br>
</div>
<div style="position:absolute;visibility:hidden;left:185px;top:0px;width:20px;height:200px;font-size:12px;background-color:red;" >
<div style="top:0px;left:0px;width:20px;height:15px;background-color:silver;" ></div>
<div style="top:20px;left:0px;width:20px;height:15px;background-color:gray;" ></div>
<div style="top:0px;left:0px;width:20px;height:15px;background-color:gray;" ></div>
</div>
</div>
</div>
<script language="JavaScript" type="text/javascript">
<!--
// Scroll Bars (01-Mar-2006)
// by Vic Phillips http://www.vicsjavascripts.org.uk
// Scoll Bars return a value relative to the Sroll Bar Slider position
// which can be used to control the value, position or other attributes of an elements.
// The Scroll Bar can include a slider and Left and Right Scroll Buttons.
// This Script addresses four types of Scroll Bars.
// 1) No Slider or Scroll Buttons.
// 2) Slider but no Scroll Buttons.
// 3) Slider and Right Scroll Button but no Left Scroll Button.
// 4) Slider and Left Scroll Button but no Right Scroll Button.
// 5) Slider, Right Scroll Buttons and Left Scroll Button.
// A value between 0 and a specified maximum
// relative to the clicked or Slider position
// is passed to a specified function as the first argument
// together with the Slide Bar object as the second argument.
// Application Notes
// Each type of Scroll Bar is intialised from a <BODY> or window onload event
// e.g. <BODY onload="zxcHoriScrollBar('HClickBar',2,'Demo',true);" >
// where
// parameter 0 = the unique ID name of the Bar (string)
// parameter 1 = the maximum value to be returned (digits)
// parameter 2 = the function to return the value to (string) (see: Applying External Function)
// parameter 3 = automatically set cursors (true or for no cursor, false or omitt )
// **** No Slider or Scroll Buttons.
//
// Bar is Defined in the HTML Code
// Horizontal Example HTML Code : <div id="HClickBar" style="width:150px;height:20px;background-color:red;"></div>
// Vertical Example HTML Code : <div id="VClickBar" style="width:20px;height:150px;background-color:red;"></div>
// The <DIV> style dictates the appearance of the Bar
// Clicking the bar will return a value, relative to the click position, to the specified function.
// **** Slider and Buttons
//
// The slider and buttons are defined as <DIV>s nested in the Bar <DIV>
// The first <DIV> is the slider
// The optional second and third <DIV>s are the scroll left and right buttons
// Horizontal Example HTML Code :
// <div id="HSlider3" style="position:absolute;overflow:hidden;left:-30px;top:105px;width:150px;height:15px;background-color:red;" >
// <div style="top:0px;width:15px;height:20px;background-color:silver;" ></div>
// <div style="left:0px;top:0px;width:15px;height:20px;background-color:gray;" ></div>
// <div style="left:20px;top:0px;width:15px;height:20px;background-color:gray;" ></div>
// </div>
//
// The scroll left or scroll right function of the buttons is assigned dependent on the style left of the <DIV>
// The 'left:0px;' button is assigned as the sroll right button and postioned at the left of the bar.
// The 'left:20px;' button is assigned as the sroll left button and postioned at the right of the bar.
// Note that the X(left) positions of the slider and buttons are reassigned during initilisation.
// Vertical Example HTML Code :
// <div id="VSlider3" style="position:absolute;overflow:hidden;left:125px;top:-0px;width:15px;height:120px;background-color:red;" >
// <div style="left:0px;width:20px;height:15px;background-color:silver;" ></div>
// <div style="top:0px;left:0px;width:20px;height:15px;background-color:gray;" ></div>
// <div style="top:20px;left:0px;width:20px;height:15px;background-color:gray;" ></div>
// </div>
// The scroll up or down right function of the buttons is assigned dependent on the style top of the <DIV>
// The 'left:0px;' button is assigned as the sroll down button and postioned at the top of the bar.
// The 'left:20px;' button is assigned as the sroll up button and postioned at the bottom of the bar.
// Note that the Y(top) positions of the slider and buttons are reassigned during initilisation.
// Applying External Function
// A value between 0 and the specified maximum value
// relative to the clicked or Slider position
// are passed to a specified function as the first argument
// together with the Slide Bar object as the second argument.
// The slider object has two properties which may be of particular use in the function
// .bar = the Scroll Bar object;
// .bartype = the Scroll Bar type 'horizontal' or 'vertical';
// To exercise full control of the slider from an external functions
// the slider object, travel, current position and minimum position parameters are required
// These are available as the Scroll Bar parameters:
// where ScrollBarObject is document.getElementById('ScrollBarID')
// slider object = ScrollBarObject.slider (object)
// slider X position = ScrollBarObject.xpos (digits) (Horizontal Scroll Bar)
// slider Y position = ScrollBarObject.ypos (digits) (Vertical Scroll Bar)
// slider travel = ScrollBarObject.travel (digits)
// slider minimum position = ScrollBarObject.min (digits)
// There may be as many applications as required on a page.
// Functional Code
var zxcDragX,zxcDragY,zxcMseX,zxcMseY,zxcObj,zxcDir,zxcTO;
var zxcSX=0;
var zxcSY=0;
var zxcCursor='pointer';
if (document.all){ zxcCursor='hand'; }
// Required for Vertical
function zxcVertScrollBar(zxcid,zxcmag,zxcfunction,zxccur){
var zxcs=zxcid;
if (typeof(zxcs)=='string'){ zxcs=document.getElementById(zxcid); }
zxcs.responce=window[zxcfunction];
zxcs.mag=zxcmag;
zxcs.min=0;
var zxcdivs=zxcs.getElementsByTagName('DIV');
if (!zxcdivs[0]){
zxcs.style.cursor=zxcCursor;
zxcs.onclick=function(event){ zxcVBarClick(event,this); }
return;
}
// following statements in this function are required for the slider and buttons
var zxcsl=zxcdivs[0];
zxcs.max=zxcs.offsetHeight-zxcsl.offsetHeight;
var zxcslS=zxcsl.style;
zxcslS.position='absolute';
zxcslS.top='0px';
if (zxccur){ zxcslS.cursor='n-resize'; }
zxcsl.sb=zxcs;
zxcsl.bar=zxcs;
zxcsl.bartype='vertical';
zxcsl.onmousedown=function(event){zxcVMseDSlide(event,this); }
zxcsl.mag=zxcmag;
for (var zxc0=1;zxc0<zxcdivs.length;zxc0++){
var zxcbut=zxcdivs[zxc0];
var zxcbutS=zxcbut.style;
zxcbutS.position='absolute';
if (zxccur){ zxcbutS.cursor=zxcCursor; }
zxcbut.sl=zxcsl;
zxcbut.sb=zxcs;
zxcbut.onmouseup=function(){clearTimeout(zxcTO); }
if (zxcbut.offsetTop>0){
zxcbutS.top=(zxcs.offsetHeight-zxcbut.offsetHeight)+'px';
zxcbut.onmousedown=function(){zxcVMseDBut(this,+1); }
zxcs.max-=zxcbut.offsetHeight;
}
else {
zxcbutS.top='0px';
zxcbut.onmousedown=function(){zxcVMseDBut(this,-1); }
zxcs.min=zxcbut.offsetHeight;
zxcslS.top=zxcs.min+'px';
}
}
zxcs.ypos=zxcs.min;
zxcs.slider=zxcsl;
zxcs.travel=zxcs.max-zxcs.min;
}
// Required for Vertical - No Slider
function zxcVBarClick(event,zxcobj){
zxcMse(event);
zxcobj.responce(zxcobj.mag*(zxcMseY-zxcPos(zxcobj)[1])/zxcobj.offsetHeight,zxcobj);
}
// Required for Vertical Slider
function zxcVMseDSlide(event,obj){
document.onmousemove=function(event){zxcVDragSlide(event);}
document.onmouseup=function(event){zxcVMseUpSlide(event);}
document.onselectstart=function(event){window.event.returnValue=false; }
zxcObj=obj;
zxcMse(event);
zxcDragY=zxcMseY-zxcObj.offsetTop;
zxcObj.sb.ypos=parseInt(zxcObj.style.top);
}
// Required for Vertical Slider
function zxcVDragSlide(event) {
zxcMse(event);
if (zxcObj.sb.ypos>=zxcObj.sb.min&&zxcObj.sb.ypos<=zxcObj.sb.max){
zxcObj.style.top=(zxcMseY-zxcDragY)+'px';
zxcObj.sb.ypos=parseInt(zxcObj.style.top);
zxcObj.sb.responce(Math.abs((zxcObj.sb.ypos-zxcObj.sb.min)/(zxcObj.sb.travel)*zxcObj.sb.mag),zxcObj);
}
else { zxcVMseUpSlide(); }
}
// Required for Vertical Slider
function zxcVMseUpSlide(){
if (zxcObj.sl){ return; }
document.onmousemove=null;
document.onselectstart=null;
zxcDragX=-1; zxcDragY=-1;
if (zxcObj.sb.ypos<zxcObj.sb.min){ zxcObj.style.top=zxcObj.sb.min+'px'; zxcObj.sb.ypos=zxcObj.sb.min; }
if (zxcObj.sb.ypos>zxcObj.sb.max){ zxcObj.style.top=zxcObj.sb.max+'px'; zxcObj.sb.ypos=zxcObj.sb.max; }
zxcObj.sb.responce(Math.abs((zxcObj.sb.ypos-zxcObj.sb.min)/(zxcObj.sb.travel)*zxcObj.sb.mag),zxcObj);
}
// Required for Vertical Buttons
function zxcVMseDBut(zxcobj,zxcdir){
if (zxcobj){ zxcObj=zxcobj; zxcDir=zxcdir; }
if (zxcObj.sb.ypos>=zxcObj.sb.min&&zxcObj.sb.ypos<=zxcObj.sb.max){
zxcObj.sl.style.top=(zxcObj.sb.ypos+=zxcDir)+'px';
zxcObj.sb.responce(Math.abs((zxcObj.sb.ypos-zxcObj.sb.min)/(zxcObj.sb.travel)*zxcObj.sb.mag),zxcObj.sl);
zxcDir*=1.05;
zxcTO=setTimeout('zxcVMseDBut()',100);
}
else {
if (zxcObj.sb.ypos<zxcObj.sb.min){ zxcObj.sl.style.top=(zxcObj.sb.min)+'px'; zxcObj.sb.ypos=zxcObj.sb.min; }
if (zxcObj.sb.ypos>zxcObj.sb.max){ zxcObj.sl.style.top=(zxcObj.sb.max)+'px'; zxcObj.sb.ypos=zxcObj.sb.max; }
zxcObj.sb.responce(Math.abs((zxcObj.sb.ypos-zxcObj.sb.min)/(zxcObj.sb.travel)*zxcObj.sb.mag),zxcObj.sl);
}
}
// Required for all Horizontal and Vertical Functions
function zxcMse(event){
if(!event) var event=window.event;
if (document.all){ zxcDocS(); zxcMseX=event.clientX+zxcSX; zxcMseY=event.clientY+zxcSY; }
else {zxcMseX=event.pageX; zxcMseY=event.pageY; }
}
// Required for all Horizontal and Vertical Functions
function zxcDocS(){
if (!document.body.scrollTop){ zxcSX=document.documentElement.scrollLeft; zxcSY=document.documentElement.scrollTop; }
else { zxcSX=document.body.scrollLeft; zxcSY=document.body.scrollTop; }
}
// Required for all Horizontal and Vertical Functions
function zxcPos(zxc){
zxcObjLeft=zxc.offsetLeft;
zxcObjTop=zxc.offsetTop;
while(zxc.offsetParent!=null){
zxcObjParent=zxc.offsetParent;
zxcObjLeft+=zxcObjParent.offsetLeft;
zxcObjTop+=zxcObjParent.offsetTop;
zxc=zxcObjParent;
}
return [zxcObjLeft,zxcObjTop];
}
//-->
</script>
</body>
</html>