Div Scroll on MouseOver

[Saad Alam]

Hi,

I am using a menu inside a div tag. What i want to do is to add scroll buttons (up and down ) along side div which move the div up and down on mouse over.How can i achieve this?

It would be very nice of you if you can provide a link to the article or blog where solution is provided to my problem.

Thanks in advance,
Saad Alam

[yokiedinosaur]

edit: never mind! figured it out! crisis begets creativity :D

Hi, thank you for posting this code. I was able to implement it and get it to work. Is there a way to have more than one instance of this on a page? I have three separate divs with text in them on one page that I would like to have scroll like this.

I'm sorry if this is has an obvious answer, but I'm a javascript newbie. Thanks in advance for any help!

@gits

[gits]

just adapt the scroll_up() and scroll_down() methods with a parameter that allows you to retrieve the corresponding 'instance' ... you might pass the id of the node and use it in the functions ... and don't forget to update the onmouseover-calls :)

kind regards

[da1vid]

Hello!

Very good joob, thanks a lot!

I have just one question. Is there any possibility that it would be possible to scroll content with mouse wheel?

THANKS A LOT AGAIN!

[gits]

you might add a mousewheel listener ... you might have a look here for a start ...

[isensmith]

Can this solution be easily adjusted to scroll left and right instead of up and down?
thanks

[boop]

<script type="text/javascript">
    var scrolling = null;
 
    function scroll_left() {
        var d = document.getElementById('scroller');
 
        d.scrollLeft = d.scrollLeft - 5;
 
        scrolling = window.setTimeout(function() {
            scroll_left();
        }, 20);
    }
 
    function scroll_right() {
        var d = document.getElementById('scroller');
 
        d.scrollLeft = d.scrollLeft + 5;
 
        scrolling = window.setTimeout(function() {
            scroll_right();
        }, 20);
    }
 
    function stop_scroll() {
        window.clearTimeout(scrolling);
    }
    </script>

this worked for me!