0

When I click my mouse and move it to the edge of the screen, the page automatically scrolls in that direction (at least on Chrome).

For instance, if you go to: Google

Press the mouse down and move your cursor to the bottom of the screen while keeping the button pressed, the page will scroll downwards.

I would like to disable this on my own website, and prevent the browser from scrolling automatically. Can this be done?

At first I thought it had to do with text selection, and I tried

$("body").disableSelection()

But that doesn't work.

Michael Seltenreich
  • 3,013
  • 2
  • 29
  • 55

1 Answers1

0

You can disable text selection with CSS:

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

But it will not help to stop drag.

You can use window.scrollTo(x, y); to scroll user to one or other location. You can bind on scroll event Capturing the "scroll down" event? and check mouse position Javascript - Track mouse position. So it's basically all you need to disable such behavior.

I've just tried some other funny ways - disable mouse events with css, disable selection with css, disable mouse event bubbling with JS. Nothing helps for your situation. Try doing with those tactics wrote before.

Community
  • 1
  • 1
Lukas Liesis
  • 24,652
  • 10
  • 111
  • 109
  • 1
    window.scrollTo just makes things worse, because now it's trying to go up and down at the same time making the page "shake". I'm afraid this will not work.. – Michael Seltenreich Feb 07 '17 at 19:14