Simple Div Scrolling

I needed a simple interaction to scroll an overlay:hidden div when the mouse is over a certain area. The resources I found online where bloated or part of larger packages that you had to buy, so I threw this together.

Here’s what screen looks like:

	We have a list of connected users to our application, within a limited space.
	This area scrolls the user list up. This area is brighter because it is active; the mouse is over it.
	This area scrolls the user list down.

The code behind the layout is a three row table. The top and bottom rows contain the code to scroll, and the middle row has a div, overflow set to hidden, that contains our HTML for listing the users. Briefly:

<table width="300" border="0" cellspacing="1" cellpadding="0" bgcolor="#ffffff"> <tr> <td bgcolor="#F3F9F1" width="100%" id="peopleUp" onMouseOver="scrollStart('Up', 'people', 'peopleUp');" onMouseOut="scrollEnd('peopleUp');"> <img src="gfx/spacer.gif" height="5" width="1"> </td> </tr> <tr> <td> <div id="people" style="height:100px; overflow-y:hidden; overflow-x:hidden;"> Loading user list… </div> </td> </tr> <tr> <td bgcolor="#F3F9F1" id="peopleDown" onMouseOver="scrollStart('Down', 'people', 'peopleDown');" onMouseOut="scrollEnd('peopleDown');"> <img src="gfx/spacer.gif" height="5" width="1"> </td> </tr> </table>

Now, our JS on the page contains:

var ourInterval; var origColor = "#F3F9F1"; var overColor = "#36FF00"; var scrollSpeed = 50; var scrollHeight = 5;

Most of the above vars should be self explanatory, but just in case, scrollHeight is how many pixels the div moves up of down every millisecond, which is determined by scrollSpeed.

Next we have our functions that are called by the mouse over and out of the table’s top and bottom TD.

function scrollStart(direction, divID, elementID){ //CHANGE THE BACKGROUND COLOR OF THE TD THE MOUSE IS OVER document.getElementById(elementID).style.backgroundColor = overColor; // REPEATED CALL EITHER scrollUp OR scrollDown ourInterval = setInterval("scroll"+direction+"('"+divID+"')", scrollSpeed); } function scrollEnd(which){ // OUR MOUSE IS OUT, SO RETURN TD TO ORIGINAL COLOR document.getElementById(which).style.backgroundColor = origColor; // STOP CALLING THE SCROLL FUNCTION clearInterval(ourInterval); }

And finally:

function scrollUp(which){ // SET THE SCROLL TOP document.getElementById(which).scrollTop = document.getElementById(which).scrollTop - scrollHeight; } function scrollDown(which){ // SET THE SCROLL TOP document.getElementById(which).scrollTop = document.getElementById(which).scrollTop + scrollHeight; }

Quick and easy. The scrollUp and scrollDown functions could even be combined… we could just send it the direction var in scrollStart and then determine if we should add or subtract our scrollTop with that.

I hope this helps if you are looking for an easy way to handle div scrolling.