Alex Rivera | Logout

How to scroll div continuously on mousedown event?

Asked 2009-10-02T20:03:13.000
11

I have two divs and two buttons:

<div id="container">
    <div id="items"></div>
</div>
<div id="up"></div>
<div id="down"></div>

How to continuously scroll '#items' until user releases the button? I tried using jquery mousedown event and animate function but couldn't make it to work.

$("#up").mousedown(function(){
$("#items").animate({"top": "+=10px"}, "fast");
})

The code above moves the div just once. I want to achieve continuous animation until the button is released. Thanks for your help!

jquery scroll jquery-animate
Edit
Report

1 Answer

15

Please, try this:

var scrolling = false;

jQuery(function($){
    $("#up").mousedown(function(){
        scrolling = true;
        startScrolling($("#items"), "-=10px");
    }).mouseup(function(){
        scrolling = false;
    });
});

function startScrolling(obj, param)
{
    obj.animate({"top": param}, "fast", function(){
        if (scrolling)
        {
            startScrolling(obj, param);
        }
    });
}
answered 2009-10-03T01:06:34.833

Your Answer