// Written by Zolka
/*
How to use:
1. put the
line to the of your html file
2. put something like:
into the place where you want to scroll.
The id must not be a number.
The next 2 numers are the size of the scroll area: width, height
The "content" is the content the scroll are must contain.
3. put these functions into events, to control your scroller:
onmousedown='clearID = setInterval("scrollvertical(\"idA\", \"up\")", 20)'
onmouseup='clearInterval(clearID); clearID = ""'
the "clearID" is a global variable, and should be definied in the of your html.
the idA here is the same id as I mentioned in the 2nd, and 3rd step.
the "up" parameter is the direction and other thing :-) it can be:
- up: scrolls upward (with this setting you should use onmousedown, and onmouseup event)
- down: scrolls downward (with this setting you should use onmousedown, and onmouseup event)
- top: immediately scrolls to the top (with this setting you should use onclick event)
- bottom: immediately scrolls to the bottom (with this setting you should use onclick event)
example event for the top setting:
onclick='scrollvertical("idA", "top")'
4. you can set the speed of the scroller with with changing the
"20" value written in the 4th step. The smaller value causes faster scroll.
Also, you may change the vscrollerDefaultScrollSpeed variable in this file.
*/
var vscrollerClearID = 0; // the scroller setInterval ID
var vscrollerDefaultScrollSpeed = 2 // you may change this value. 1 - slowest, 10 - fastest
var zVScrollerContainer = new Array(); // contains the registered scrollers
if (window.addEventListener)
window.addEventListener('DOMMouseScroll', scrollverticalwheel, true);
function scrollvertical(scrollerID, direction, speed)
{
if (!speed)
speed = vscrollerDefaultScrollSpeed;
var scroller = document.getElementById(scrollerID);
if (scroller == null)
return;
var actualheight = scroller.offsetHeight
var scrollerheight = scroller.parentNode.offsetHeight
var scrollerTop = parseInt(scroller.style.top, 10);
var minTop = (actualheight * (-1) + scrollerheight);
if (minTop > 0)
minTop = -1;
if (direction == "down")
{
if (scrollerTop > minTop)
scrollerTop -= speed;
if (scrollerTop < minTop)
scrollerTop = minTop;
scroller.style.top = scrollerTop + "px";
}
else if (direction == "up")
{
if (scrollerTop < -1)
scrollerTop += speed;
if (scrollerTop > -1)
scrollerTop = -1;
scroller.style.top = scrollerTop + "px";
}
else if (direction == "top")
{
scroller.style.top = "-1px";
}
else if (direction == "bottom")
{
scroller.style.top = minTop + "px";
}
// alert ("CurrentTop: " + scroller.style.top + " minTop:" + minTop);
}
function zVScrollerIsRegistered(id)
{
if (!id) return false;
if (id == "") return false;
for (var i = 0; i < zVScrollerContainer.length; i++)
{
if (zVScrollerContainer[i] == id)
return true;
}
return false;
}
function scrollverticalwheel(e)
{
var foundID = false;
var currentObj;
if (e.target)
currentObj = e.target;
else if (e.srcElement)
currentObj = e.srcElement;
else
return;
var scrollerID;
while (!foundID)
{
if ((currentObj.tagName == "DIV") && zVScrollerIsRegistered(currentObj.id))
{
scrollerID = currentObj.id;
foundID = true;
break;
}
else
{
currentObj = currentObj.parentNode;
if (currentObj == null)
break;
}
}
if (!foundID)
return;
var amount;
if (e.wheelDelta)
{
amount = e.wheelDelta/120;
if (window.opera)
amount = -amount;
}
else if (e.detail)
{
amount = -e.detail/3;
}
if (amount < 0)
scrollvertical(scrollerID, "down", 9);
else
scrollvertical(scrollerID, "up", 9);
if (e.preventDefault)
e.preventDefault();
e.returnValue = false;
}
function WriteScrollAreaHere(scrollerID, swidth, sheight, content)
{
zVScrollerContainer[zVScrollerContainer.length] = scrollerID;
var resultStr;
if (navigator.userAgent.indexOf("MSIE") > 0)
{
resultStr = '';
}
else
{
resultStr = '';
}
document.write(resultStr);
}
function RegisterVerticalScrollerEvents(containerID)
{
if (navigator.userAgent.indexOf("MSIE") <= 0)
return;
var oCell = this.document.getElementById(containerID);
if (oCell == null)
return;
oCell.onmousewheel = function(e) { return scrollverticalwheel(this.document.parentWindow.event); };
}
function WriteScrollerButtonsHere(scrollerID, speed)
{
var resultStr;
// Beginning of the scroll buttons
resultStr = "\n"
+ "\n"
+ "| | \n"
+ " | \n"
+ "
\n"
+ "
\n";
// End of the scroll buttons
document.write(resultStr);
}