Div Scroll on MouseOver

**pronerd** · Apr 7 '08, 04:01 PM

Originally posted by Saad Alam

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.

If that can be done it would likely have to be done with an iFrame instead of a div tag. As far as I know div tags do not use scroll bars. IFrame tags will have scroll bars any time their content is longer or wider than the the dimensions of the iFrame.

You would have to check the DOM references to see if there are any attributes you can set to modify the scroll position.

**gits** · Apr 7 '08, 06:27 PM

hi ...

you might play with the div's overflow style-property ... have a look at the following simple example ... that scrolls a div when moving the mouse over custom scroll-controls:

Code:

<html>
    <script type="text/javascript">
    var scrolling = null;
    
    function scroll_up() {
        var d = document.getElementById('scroller');

        d.scrollTop = d.scrollTop - 5;

        scrolling = window.setTimeout(function() {
            scroll_up();
        }, 100);
    }
    
    function scroll_down() {
        var d = document.getElementById('scroller');

        d.scrollTop = d.scrollTop + 5;

        scrolling = window.setTimeout(function() {
            scroll_down();
        }, 100);
    }

    function stop_scroll() {
        window.clearTimeout(scrolling);
    }
    </script>
    <body>
        <div style="color:red;" onmouseover="scroll_up();" onmouseout="stop_scroll();"> scroll up </div>
        <div id="scroller" style="width:100px; height:70px; overflow:hidden;">
            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
        </div>
        <div style="color:blue;" onmouseover="scroll_down();" onmouseout="stop_scroll();"> scroll down </div>
    </body>
</html>

kind regards

**Saad Alam** · Apr 8 '08, 04:32 AM

Originally posted by gits

hi ...

you might play with the div's overflow style-property ... have a look at the following simple example ... that scrolls a div when moving the mouse over custom scroll-controls:

Code:

<html>
    <script type="text/javascript">
    var scrolling = null;
    
    function scroll_up() {
        var d = document.getElementById('scroller');

        d.scrollTop = d.scrollTop - 5;

        scrolling = window.setTimeout(function() {
            scroll_up();
        }, 100);
    }
    
    function scroll_down() {
        var d = document.getElementById('scroller');

        d.scrollTop = d.scrollTop + 5;

        scrolling = window.setTimeout(function() {
            scroll_down();
        }, 100);
    }

    function stop_scroll() {
        window.clearTimeout(scrolling);
    }
    </script>
    <body>
        <div style="color:red;" onmouseover="scroll_up();" onmouseout="stop_scroll();"> scroll up </div>
        <div id="scroller" style="width:100px; height:70px; overflow:hidden;">
            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
        </div>
        <div style="color:blue;" onmouseover="scroll_down();" onmouseout="stop_scroll();"> scroll down </div>
    </body>
</html>

kind regards

Thank you so much gits.

**gits** · Apr 8 '08, 06:59 AM

no problem ;) ... thats why this forum is here :) ... post back to the forum in case you have more questions ...

kind regards

**mtech323** · May 29 '09, 07:33 PM

Is there any way to be able to be aware of when the div content "bottom" has been reached so that I can hide the "DOWN" button, and same for top? Is there javascript that can tell when a certain element of the div (last line, a spacer image) is on the screen and then report this state back so I can then hide the "DOWN" button? THANKS!

**acoder** · May 30 '09, 11:04 AM

The top is easy: if it's 0, it's at the top. For the bottom, check that it's equal to the scrollHeight.

**mtech323** · May 30 '09, 02:48 PM

That makes sense. Thanks.

One thing (a big one!) -- I'm enough of a novice that I'm not sure what syntax I need to read the scrollHeight and have an IF statement (I'm guessing) to then change the element's display property. Anyone want to hook a self-taught novice up?

And while we're at it, the effect I'd really like to have is one without an explicit up and down "button" but instead for scrolling to work like this:

http://deluxe-menu.com/scrollable-submenus-sample.html

(hover over Samples I and you'll see it "smart scroll").

Any help is appreciated. Thanks.

**acoder** · May 31 '09, 04:56 PM

Add an ID to the 'link', e.g.

Code:

<div id="scrollup" style="color:red;" onmouseover="scroll_up();" onmouseout="stop_scroll();"> scroll up </div>

and then add a little snippet to the scroll_up() function:

Code:

if (d.scrollTop == 0) {
    document.getElementById("scrollup").style.display = "none";
else {
...

In scroll_down(), it'd be:

Code:

if (d.scrollTop == d.scrollHeight) {
    document.getElementById("scrolldown").style.display = "none";

Of course, you'd need to add code to display them again.

However, you mention that you want "smart" scrolling. For that you'd need to see the mouse position within the div. If it's below a certain point, start scrolling. Once it goes above that point, scroll back up.

**mtech323** · Jun 1 '09, 02:25 PM

Originally posted by acoder

Add an ID to the 'link', e.g.

Code:

<div id="scrollup" style="color:red;" onmouseover="scroll_up();" onmouseout="stop_scroll();"> scroll up </div>

and then add a little snippet to the scroll_up() function:

Code:

if (d.scrollTop == 0) {
    document.getElementById("scrollup").style.display = "none";
else {
...

In scroll_down(), it'd be:

Code:

if (d.scrollTop == d.scrollHeight) {
    document.getElementById("scrolldown").style.display = "none";

Of course, you'd need to add code to display them again.

However, you mention that you want "smart" scrolling. For that you'd need to see the mouse position within the div. If it's below a certain point, start scrolling. Once it goes above that point, scroll back up.

GREAT! I'm gonna try it. Mil Gracias.

**yokiedinosaur** · Sep 16 '09, 09:42 PM

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!

Originally posted by gits

hi ...

you might play with the div's overflow style-property ... have a look at the following simple example ... that scrolls a div when moving the mouse over custom scroll-controls:

Code:

<html>
    <script type="text/javascript">
    var scrolling = null;
    
    function scroll_up() {
        var d = document.getElementById('scroller');

        d.scrollTop = d.scrollTop - 5;

        scrolling = window.setTimeout(function() {
            scroll_up();
        }, 100);
    }
    
    function scroll_down() {
        var d = document.getElementById('scroller');

        d.scrollTop = d.scrollTop + 5;

        scrolling = window.setTimeout(function() {
            scroll_down();
        }, 100);
    }

    function stop_scroll() {
        window.clearTimeout(scrolling);
    }
    </script>
    <body>
        <div style="color:red;" onmouseover="scroll_up();" onmouseout="stop_scroll();"> scroll up </div>
        <div id="scroller" style="width:100px; height:70px; overflow:hidden;">
            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
        </div>
        <div style="color:blue;" onmouseover="scroll_down();" onmouseout="stop_scroll();"> scroll down </div>
    </body>
</html>

kind regards

**gits** · Sep 17 '09, 03:47 PM

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** · Sep 18 '10, 10:57 AM

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** · Sep 22 '10, 11:17 AM

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

**isensmith** · Feb 3 '12, 07:23 PM

Left/Righ??

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

Div Scroll on MouseOver

Div Scroll on MouseOver

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment