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: /

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 continues scrolling even though I am setting down=false. How can I stop this and why is it happening?

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/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 continues scrolling even though I am setting down=false. How can I stop this and why is it happening?

• javascript
• jquery
• scroll

• What do you mean by "scroll the div by using the mouse?" I don't actually see anything different happen when I move the mouse, whether or not it's clicked. – Matt Ball Commented Jun 6, 2011 at 18:35
• Click the div and hold the mouse down, then move it around horizontally. – Radu Commented Jun 6, 2011 at 18:37
• Here is perhaps a clearer example of the desired effect: jqueryfordesigners./demo/scrollable-timelines.html – Radu Commented Jun 6, 2011 at 18:38
• 1 @Radu, if you want that affect, then remove the scrollbar. – Naftali Commented Jun 6, 2011 at 18:39
• 1 BTW, if you don't want the text to be selectable: jsfiddle/mattball/MP2cg via *user-select – Matt Ball Commented Jun 6, 2011 at 18:48

2 Answers 2

This works for me in Chrome: http://jsfiddle/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