Scrolling with mouse movements

var down=false;
var scrollLeft=0;
var x=0;

$('#test').mousedown(function(e) {
    down = true;
    scrollLeft = this.scrollLeft;
    x = e.clientX;
}).mouseup(function() {
    down = false;
}).mousemove(function(e) {
    if (down) {
       this.scrollLeft = scrollLeft + x - e.clientX;
    }
}).mouseleave(function() {
    down = false;
});

Here's a demo: http://jsfiddle.net/STVqe/3/

I want to be able to scroll the div by using the mouse. It works fine, though a bit weird with text since you can accidentally select things, but it has a problem that shows up when you move the mouse outside of the test div. It contin开发者_JS百科ues scrolling even though I am setting down=false. How can I stop this and why is it happening?

This works for me in Chrome: http://jsfiddle.net/mattball/MP2cg/

It looks like the problem is actually caused because of the text being selected. If you add the non selectable text css rules and go with your original javascript it works (I believe) as you want, with scrollbars. Tested in FF 3.6