Question

I’ve got a button that is intended to scroll down a div when the mouse button is clicked and held on it . I thought this should work but it only scrolls one px per click as oppose to scrolling until the mouse up event .

code:

 var howfar = 0;
    $('#scrolldown').mousedown(function() {

        howfar ++;
        $('#scrollbox').scrollTop(howfar);

    });

Answer 1

Keeping mousedown continously doesn’t mean it will fire that event continously, it will only fire once. What you can do it start increasing the scrollTop once mousedown event triggers using setInterval and then clear the interval on mouseup event.

Try something like this.

var howfar = 0;
var timer;
$('#scrolldown').mousedown(function() {
    var innerHeight = $('#scrollbox').css('height', 'auto').height();
    $('#scrollbox').css('height', '100px');
    timer = setInterval(function(){
        if(howfar < innerHeight){
            $('#scrollbox').scrollTop(howfar++);
        }
        else{//Clear the interval
            clearInterval(timer);
        }
    }, 10);
});
$('#scrolldown').mouseup(function() {
     clearInterval(timer);
});

Demo