Scrolling with mouse movements

Question

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

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, Jun 06 '11 at 18:35
Click the div and hold the mouse down, then move it around horizontally. — Radu, Jun 06 '11 at 18:37
Here is perhaps a clearer example of the desired effect: http://jqueryfordesigners.com/demo/scrollable-timelines.html — Radu, Jun 06 '11 at 18:38
BTW, if you don't want the text to be selectable: [jsfiddle.net/mattball/MP2cg](http://jsfiddle.net/mattball/MP2cg/) via [`*user-select`](http://stackoverflow.com/questions/826782/) — Matt Ball, Jun 06 '11 at 18:48
@Matt Ball, great tip, wasn't aware of that! Intended use is not with text but it certainly makes testing more useful. @Neal Scroll bar can't leave but any ideas why its presence causes the div to scroll all the way on mouse leave? — Radu, Jun 06 '11 at 18:50
Honestly, it's just plain confusing to show a scroll bar _and_ enable touchscreen-like scrolling. — Matt Ball, Jun 06 '11 at 18:51

score 5 · Accepted Answer · answered Jun 06 '11 at 18:50

5

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

answered Jun 06 '11 at 18:50

Matt Ball

354,903
100
647
710

Same thing Neal suggested and it works but I'd like to keep the scroll bar if possible. Neal suggested just using a div to do the same thing that the scroll bar is doing but it'd be nice to avoid that. – Radu Jun 06 '11 at 18:52
Hiding the scrollbar solved it. However, a scrollbar *would* be nice here... (to have an indicator where the hidden text is) – Šime Vidas Jun 06 '11 at 18:53
@Radu like I commented on your question, I find it _very_ confusing to show a scroll bar **and** enable touchscreen-like scrolling. – Matt Ball Jun 06 '11 at 18:53
I understand the point and I may have to settle. I'm implementing this for a genome browser so I do think that a scroll bar is useful as it gives you a sense of where you are along a chromosome or whatever. The touchscreen scrolling is meant to make it feel more 'tactile' and is often more accessible given that your mouse is going to be involved in other types of interactions in the navigation div. Not sure if that changes your opinion on using the scrollbar from a style perspective but it's worth a thought. – Radu Jun 06 '11 at 18:58

score 1 · Answer 2 · answered Jun 06 '11 at 19:25

1

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

answered Jun 06 '11 at 19:25

James

20,957
5
26
41

Chrome is doing something weird, even without any script the thing scrolls left and right when clicking and dragging to the left or right of the element. That seems to be Chrome default behavior...maybe it can be disabled, or maybe it's not relevant for your actual project (just textareas?) – James Jun 06 '11 at 19:45
Yeah, Chrome seems to be the culprit here. Even in Chrome the scrolling stops on mouseup outside the div but if I try and trigger mouseup on mouseleave nothing changes. – Radu Jun 06 '11 at 20:00

Scrolling with mouse movements

2 Answers2