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:

scrollingDiv screenshot

bullet_1 We have a list of connected users to our application, within a limited space.
bullet_2 This area scrolls the user list up. This area is brighter because it is active; the mouse is over it.
bullet_3 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.

Advertisements

28 comments

  1. Need help…Pasted first section in body, ok.

    Now, our JS on the page contains: where do I put this? Do I need to state java script?

    Please lead me thru this. I love this scroller.

  2. I got this working in firefox, ie, and safari, but ie 5.5 and 6 seem to have an error. I’m using this for a menu with a list of links, with scroll buttons at the top and bottom. The menu will scroll using this method, but as soon as I hover over a link in the scrolled div, the div scroll resets and I end up back at the top. This is driving me insane! Anyone have any ideas?

  3. For anyone who finds this doesn’t work in Opera, the fix is to replace “overflow-y: hidden; overflow-x:hidden” with just plain “overflow:hidden”.

    And here’s me throwing all these tests about to make sure the thing doesn’t scroll too far….

  4. I’m having a hard time getting this to work at all. instead of the table, I’m trying to get an image rollover to scroll the div, but it’s not functioning at all. The code I got for the image is

    is that correct? I copied the javascript as is.

  5. Whoops, the code didn’t show up on my post. It got lost in translation. I got it working, in any case. The problem was that the quote marks weren’t reading in the HTML and JS.

    I any case, I have another question. How can I make it so that on a mouse click, the scrolling speed would increase and it would go back to normal on mouse release. I duplicated the scroll function and created a new variable called scrollFast and I input that into the new function.

    for the image, I have a mouseOver event which is the same and a mouseDown event which calls the fast scroll. MouseUp and mouseOut calls the scrollEnd function.

    This works somewhat and the speed increases when I click, however, when I unclick, it continues scrolling no matter what I do. And then scrolling up doesn’t work and gives me a jitter since it’s fighting the scroll down.

    Any comments?

  6. Great script, very simple and easy. Think I wrote something simliar a few years back, but not quite as slick.

    *** NOTE IF IT JUST ISNT WORKING: ***

    Not sure if its just me, but copying and pasting the above code gave me quotation marks and apostrophes that aren’t valid in the code. SO if it just wont work, just delete and retype the “‘s and ”s and you’ll be laughing.
    Thanks again.

  7. Thank you!, the script is great, simple and usefull.

    Now i would like to make a change but i don’t have too much experience in js programing. could be great if the scroll areas remain invisible and without link when the div doesnt have overflow. How could I do this?

  8. Thank you~!

    This script is indeed very useful especially for navigation panels. the scroll bar eats up the horizontal space inside the div layer…

    anyway~! Thanks Alot ^.^

  9. Pingback: treat a yeast infection


Comments are closed.