鼠标移动时滚动窗口

Posted 2023-02-22

【中文标题】鼠标移动时滚动窗口

【英文标题】：scroll window when mouse moves

【发布时间】：2011-06-29 09:40:23

【问题描述】：

大家好我的意思是当鼠标移向窗口边缘（x 或 y 或两者）时，我希望页面滚动，当鼠标停止移动时，我希望页面停止滚动。有很多示例说明如何基于使用 onClick 事件或窗口边缘的滚动区域进行滚动，但基于鼠标光标的移动的例子不多。

任何帮助将不胜感激。

【参考方案1】：

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

您可以在此处阅读mousemove 事件。无论如何，下面的代码应该可以工作，但我真的不建议使用它。对于有敏感老鼠的人来说，它可能会特别迷失方向：

// 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;

【讨论】：

完美.. 谢谢。是的，你是对的，改变预期的功能并不是很好，但是这个页面就像一个画廊墙，所以“看你指向的地方”的功能是一个很好的效果。为了减少“抽搐”（并可能增加一些加速），最好我添加某种缓动效果。这可能吗？

当然，您可以将var diffX = e.clientX - x 存储在变量中，然后检查if (Math.abs(diffX) > 1) 或其他内容，您可以将其除以2 以降低敏感度等。您真正需要知道的是window.scrollBy 将通过提供的 x 和 y 参数滚动窗口。