【问题标题】:scroll window when mouse moves鼠标移动时滚动窗口
【发布时间】:2011-06-29 09:40:23
【问题描述】:

大家好

我的意思是当鼠标移向窗口边缘(x 或 y 或两者)时,我希望页面滚动,当鼠标停止移动时,我希望页面停止滚动。

有很多示例说明如何基于使用 onClick 事件或窗口边缘的滚动区域进行滚动,但基于鼠标光标的移动的例子不多。

任何帮助将不胜感激。

【问题讨论】:

    标签: javascript scroll mouse acceleration


    【解决方案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 将通过提供的 xy 参数滚动窗口。
    猜你喜欢
    • 1970-01-01
    • 2011-10-03
    • 1970-01-01
    • 2021-11-11
    • 2014-08-14
    • 1970-01-01
    • 2011-09-29
    • 2010-09-25
    相关资源
    最近更新 更多