CODEWITHSUNDEEP
javascriptjqueryscroll
Radu
Radu

Reputation: 8699

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

Upvotes: 2

Views: 7940

Answers (2)

James
James

Reputation: 22247

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

Upvotes: 1

Matt Ball
Matt Ball

Reputation: 359826

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

Upvotes: 5

Related Questions