Question

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.

Answer 1

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;