HTML5: Preventing helper auto-scroll functionality during dragging

Question

It's very hard to search on the internet for information about this behavior because I do not know the term associated with it. I will do my best to describe it.

This is the behavior that usually occurs in almost any browser element that supports scrolling: If you click the mouse, then drag it outside of the scrolling area while holding down the button, it will automatically scroll horizontally or vertically towards the direction which you exited.

It's very helpful when you are attempting to select page elements to copy them, but the behavior must be prevented when performing other custom operations. The functionality I'm attempting to implement is the ability to drag a page by dragging the mouse, much like the grab-hand mouse tool found prominently in PDF viewers. It works great with minimal code but I do not know how to disable this helper auto-scrolling once the mouse leaves the scrollable area.

    $("#scroll_area").on('mousedown', function (e) {
        startPos.x = e.clientX;
        startPos.y = e.clientY; 
        drag = true;
    });
    $(document).on('mousemove', function (e) {
        if (drag) {
            // find relative mouse motion
            var diffX = e.clientX - startPos.x;
            var diffY = e.clientY - startPos.y;
            // scroll our body by the relative amount. 
            document.body.scrollTop -= diffY;
            document.body.scrollLeft -= diffX;
            startPos.x = e.clientX;
            startPos.y = e.clientY; // continue updating
            return false; // if dragging do not perform regular things
        }
    });
    $(document).on('mouseup', function (e) {
        // clean up the drag no matter where you let go of the mouse.
        // don't bother evaluating motion here. 
        drag = false;
    });

My hope was that the return false would solve the problem but it does not. Indeed even when the mouse stops moving (when it has been dragged outside of the scrolling area) the autoscroll continues.

Have you tried disabling the selection behaviour? See http://stackoverflow.com/questions/69430/ — Neil, Oct 17 '12 at 16:20

Dcullen · Accepted Answer · 2012-10-17T20:22:20.250

2

Have you tried preventDefault?

$("#scroll_area").on('mousedown', function (e) {
    e.preventDefault();
});

This will prevent all dragging on the page. You can then implement just the functionality you would like to happen on drag.

JSFiddle Example: http://jsfiddle.net/nwGaF/1/

edited Oct 17 '12 at 20:22

answered Oct 17 '12 at 19:28

Dcullen

669
4
11

I have added this to the beginning of my mousemove callback. Still doesn't change the behavior. It really should, but it just doesn't work. – Steven Lu Oct 17 '12 at 20:13
Try adding it to #scroll_area also. It should propagate anyway but just to make sure. The next thing i would try if that does work is to make sure everything is getting called as expected (console log+alerts) – Dcullen Oct 17 '12 at 20:16
Using `preventDefault()` on `mousedown` did the trick. You should edit your answer to say that and I'll accept it. – Steven Lu Oct 17 '12 at 20:19
It's weird because you used the `mousedown` in your fiddle but not in the answer. – Steven Lu Oct 17 '12 at 20:30
Sorry, that was confusing, messed up when copying the answer. – Dcullen Oct 17 '12 at 20:32
Old question, I know, but almost the same problem persists here with the newest version of Chrome (and probably other browsers as well). The example in the fiddle shows almost the same annoying behaviour here. When I drag the scrollbar and then leave the area while holding the button (and then release the button), it keeps following the mouse around when it gets somewhat close to the scrollbar. Or is this an entirely different problem? – markj Nov 25 '14 at 08:54

HTML5: Preventing helper auto-scroll functionality during dragging

1 Answers1

Linked