scroll upwards when the mouse is in the top half, for them to scroll downwards when the mouse is in the bottom half, and to remain still when no focus
<!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" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
.scroller {
position:relative;width:200px;height:400px;border:solid red 1px;
}
.scroller IMG {
float:left;
}
.scrollerH {
position:absolute;left:300px;top:50px;width:400px;height:150px;border:solid red 1px;
}
.scrollerH IMG {
float:left;
}
/*]]>*/
</style></head>
<body>
<div id="scroller1" class="scroller">
<div class="belt">
<img src="http://www.vicsjavascripts.org/StdImages/Egypt5.jpg" alt="image" />
<img src="http://www.vicsjavascripts.org/StdImages/Egypt6.jpg" alt="image" />
<img src="http://www.vicsjavascripts.org/StdImages/Egypt7.jpg" alt="image" />
</div>
</div>
<br />
<div id="scroller2" class="scroller">
<div class="belt">
<img src="http://www.vicsjavascripts.org/StdImages/Egypt5.jpg" alt="image" />
<img src="http://www.vicsjavascripts.org/StdImages/Egypt6.jpg" alt="image" />
<img src="http://www.vicsjavascripts.org/StdImages/Egypt7.jpg" alt="image" />
</div>
</div>
<div id="scroller3" class="scrollerH">
<div class="belt">
<img src="http://www.vicsjavascripts.org/StdImages/Egypt5.jpg" alt="image" />
<img src="http://www.vicsjavascripts.org/StdImages/Egypt6.jpg" alt="image" />
<img src="http://www.vicsjavascripts.org/StdImages/Egypt7.jpg" alt="image" />
</div>
</div>
<script> vic=0; </script>
<form name=Show id=Show style="position:absolute;visibility:visible;top:700px;left:0px;" >
<input size=100 name=Show0 >
<input size=10 name=Show1 >
<input size=10 name=Show2 >
<input size=10 name=Show3 >
<input size=10 name=Show4 >
<input size=10 name=Show5 >
<input size=10 name=Show6 >
<input size=10 name=Show7 >
<input size=10 name=Show8 >
<input size=10 name=Show9 ><br>
<textarea name=TA rows=1 cols=100 ></textarea>
</form>
<script type="text/javascript">
/*<![CDATA[*/
// Mouse Scroller. (21-May-2014)
// by: Vic Phillips - http://www.vicsjavascripts.org/
var zxcMouseScroller={
init:function(o){
var oop=this,id=o.ParentID,m=o.Mode,e=o.MouseEdge,s=o.Speed,p=document.getElementById(id),b=p?p.getElementsByTagName('DIV')[0]:null,m=typeof(m)=='string'?m.charAt(0).toUpperCase():'V',m=m=='H'?[0,'left','offsetWidth','offsetLeft','width']:[1,'top','offsetHeight','offsetTop','height']
if (b){
p.style.overflow='hidden';
b.style.position='absolute';
m[0]==0?b.style.width='30000px':null;
var clds=b.childNodes,lst=clds[clds.length-1],lst=lst.nodeType==1?lst:lst.previousSibling,sz=lst[m[2]]+lst[m[3]],c,cc,z0=1;
b.style[m[4]]=sz+5+'px';
c=b.cloneNode(true);
c.style.left=c.style.top='0px';
for (;z0<Math.ceil(p.offsetHeight/sz)+1;z0++){
cc=c.cloneNode(true);
cc.style[m[1]]=sz*z0+'px';
b.appendChild(cc);
}
o.m=m;
o.t=0;
o.p=p;
o.b=b;
o.e=typeof(e)=='number'&&e>0&&e<p[m[2]]/2?e:p[m[2]]/2;
o.spd=typeof(s)=='number'&&s!=0?s:2;
o.s=0;
o.sz=sz;
b.style[m[1]]='0px';
this.addevt(document,'mousemove','mse',o,p);
o.to=setInterval(function(){ oop.scroll(o); },50);
}
},
scroll:function(o){
var oop=this;
if (o.s!=0){
o.t+=o.s;
o.t+=o.s<0&&o.t<-o.sz?o.sz:o.t>0?-o.sz:0;
o.b.style[o.m[1]]=o.t+'px';
}
},
mse:function(o,p,e){
var p=this.pos(o.p),ds=!document.body.scrollTop?[document.documentElement.scrollLeft,document.documentElement.scrollTop]:[document.body.scrollLeft,document.body.scrollTop],m=window.event?[e.clientX+ds[0],e.clientY+ds[1]]:[e.pageX,e.pageY],y=m[o.m[0]]-p[o.m[0]];
o.s=o.spd*(m[0]>p[0]&&m[0]<p[0]+o.p.offsetWidth&&m[1]>p[1]&&m[1]<p[1]+o.p.offsetHeight?y<o.e?-1:y>o.p[o.m[2]]-o.e?1:0:0);
},
pos:function(obj){
var rtn=[0,0];
while(obj){
rtn[0]+=obj.offsetLeft;
rtn[1]+=obj.offsetTop;
obj=obj.offsetParent;
}
return rtn;
},
addevt:function(o,t,f,p,p1){
var oop=this;
o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1,e);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1,e); }):null;
}
}
zxcMouseScroller.init({
ParentID:'scroller1', // the unique ID name of the parent DIV. (string)
Mode:'Vertical', //(optional) the scroll mode, 'Vertical' or 'Horizontal'. (string, default = 'Vertical')
MouseEdge:100, //(optional) the distance from the edge to activate scroll. (number, default = the parent size/2)
Speed:2 //(optional) the scroll speed. (number, default = 2)
});
zxcMouseScroller.init({
ParentID:'scroller2',
Speed:-2
});
zxcMouseScroller.init({
ParentID:'scroller3',
Mode:'Horizontal',
MouseEdge:50,
Speed:-2
});
/*]]>*/
</script>
</body>
</html>