鼠标移动时滚动窗口

本文介绍了鼠标移动时滚动窗口的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

Hello all所有我的意思是当鼠标移向窗口边缘（x或y或两者）时，我希望页面滚动，当鼠标停止移动时，我希望页面停止滚动。

有许多如何基于在窗口边缘使用onClick事件或滚动区域进行滚动的示例，但不是基于鼠标光标。

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.

非常感谢任何帮助。

推荐答案

网页已经设计为使用滚动条，页面/主页/结束/箭头键等滚动。是否有任何理由不适合您的页面？改变预期的功能通常不是一个好主意。

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;

这篇关于鼠标移动时滚动窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

MouseMove