6

Hello all

What I mean is while the mouse is moving towards the edge of the window (x or y or both), I want the page to scroll, and when the mouse stops moving, I want the page to stop scrolling.

There are numerous examples of how to scroll based on using a onClick event or a scroll zone at the edge of a window, but not much based on the movement of the mouse cursor.

Any help would be much appreciated.

kevin
  • 65
  • 1
  • 1
  • 3

1 Answers1

5

Web pages are already designed to scroll using the scroll bar, page/home/end/arrow keys, etc. Is there any reason that's insufficient for your page? It's usually not a good idea to alter expected functionality.

You can read up on the mousemove event here. Anyway, the code below should work, but I really don't recommend using it. It can be especially disorienting for people with sensitive mice:

// Variables for current position
var x, y;

function handleMouse(e) {
  // Verify that x and y already have some value
  if (x && y) {
    // Scroll window by difference between current and previous positions
    window.scrollBy(e.clientX - x, e.clientY - y);
  }

  // Store current position
  x = e.clientX;
  y = e.clientY;
}

// Assign handleMouse to mouse movement events
document.onmousemove = handleMouse;
brymck
  • 7,555
  • 28
  • 31
  • Perfect.. Thank you. Yes you are right changing the expected functionality isn't great but this page resembles a gallery wall so the feature of "look where you point" is a nice effect. To reduce "twitchyness" (and add some acceleration maybe), probably best I add some sort of easing effect. Is this possible? – kevin Jun 29 '11 at 10:36
  • Sure, you could just store `var diffX = e.clientX - x` in a variable and then check `if (Math.abs(diffX) > 1)` or something, you could divide it by 2 to make things less sensitive, etc. All you really need to know is that `window.scrollBy` will scroll the window by the supplied `x` and `y` parameters. – brymck Jun 29 '11 at 10:43