Javascript to use mouse click-hold to navigate?

Question

I have a scrollable div tag (overflow). Now I'd like to use mouse to click and hold and move to navigate up and down (like how the hand cursor feature in Adobe Reader works).

Is there any js script to achieve this? Specifically, I'm using jquery, any jquery plugins to achieve this?

Answer 1

Don't know about any plugins but this shouldn't be too hard:

$(function() {
    $('#foo').mousedown(function(e) {
        var start = e.pageY;
        var startPos = $(this).scrollTop();
        var el = $(this);

        $().mousemove(function(e) {
            var offset = start - e.pageY;
            el.scrollTop(startPos + offset);
            return false;
        });

        $().one('mouseup', function(e) {
            $().unbind();
        });

        // Only if you want to prevent text selection
        return false;
    });
});

A working example can be found here:

http://www.ulmanen.fi/stuff/mousescroll.php