当光标位于屏幕的顶部或底部边缘时，如何使用 JQuery/Javascript 向下滚动页面？

Posted 2023-05-08

【中文标题】当光标位于屏幕的顶部或底部边缘时，如何使用 JQuery/Javascript 向下滚动页面？

【英文标题】：How use JQuery/Javascript to scroll down a page when the cursor at the top or bottom edge of the screen?

【发布时间】：2012-02-25 04:02:44

【问题描述】：

简单，我只想拥有它，这样当用户拖动项目并到达视口的最底部或顶部时（10px 左右），页面 （大约 3000 像素长） 轻轻向下或向上滚动，直到他们将光标 （因此被拖动的项目）移出该区域。

一个项目是一个 li 标签，它使用 jquery 使列表项可拖动。具体来说：

../jquery-ui-1.8.14.custom.min.js http://code.jquery.com/jquery-1.6.2.min.js

我目前使用 window.scrollBy(x=0,y=3) 滚动页面并具有以下变量：

e.pageY ... 提供页面上光标的绝对 Y 坐标（与屏幕无关） $.scrollTop() ... 提供从页面顶部的偏移量（当滚动条一直向上时，它是 0） $.height()... 提供用户浏览器/视口中可视区域的高度 body.offsetHeight ...整个页面的高度

我怎样才能实现这一点，哪个事件最能适应这一点（目前它在鼠标悬停中）？ 我的想法：

使用 if/else 检查它是在顶部还是底部，如果 e.pageY 显示它在顶部，则向上滚动，如果 e.page& 在底部则向下滚动，然后调用 $(' li').mouseover() 事件迭代...
使用 do while 循环...实际上效果不错，但很难停止滚动到远处。但我不确定如何控制迭代......

我最近的尝试：

          ('li').mouseover(function(e) 

            totalHeight = document.body.offsetHeight;
            cursor.y = e.pageY;
            var papaWindow = window;
            var $pxFromTop = $(papaWindow).scrollTop();
            var $userScreenHeight = $(papaWindow).height();
            var iterate = 0;

            do 
                papaWindow.scrollBy(0, 2);
                iterate++;
                console.log(cursor.y, $pxFromTop, $userScreenHeight);
            

            while (iterate < 20);
      );

【问题讨论】：

仅供参考，我只是担心新的浏览器，主要是 FF 和 Chrome……IE 7 或更低版本在我的“世界”中不存在

嗨，你现在有解决这个问题的有效方法吗？你能贴出来吗？我在这里发布了类似的问题：***.com/questions/11222047/…

【参考方案1】：

现在工作得很好，用户有时只需要在拖动项目时“摇晃”鼠标以保持滚动，但对于仅使用鼠标位置滚动它非常可靠。这是我最终使用的：

 $("li").mouseover(function(e) 

  e = e || window.event; var cursor =  y: 0 ; cursor.y = e.pageY; //Cursor YPos
  var papaWindow = parent.window;
  var $pxFromTop = $(papaWindow).scrollTop();
  var $userScreenHeight = $(papaWindow).height();

  if (cursor.y > (($userScreenHeight + $pxFromTop) / 1.25)) 

         if ($pxFromTop < ($userScreenHeight * 3.2)) 

                   papaWindow.scrollBy(0, ($userScreenHeight / 30));
             
        
  else if (cursor.y < (($userScreenHeight + $pxFromTop) * .75)) 

        papaWindow.scrollBy(0, -($userScreenHeight / 30));

        

   ); //End mouseover()

【讨论】：

if ($pxFromTop 是为了让用户无法向下滚动到列表底部

应该有一个);在你的代码之后。否则会引发错误。 （我无法编辑，因为它少于 6 个字符）

谢谢@LunaticNeko，我更新了，一定是在复制粘贴中漏掉了

【参考方案2】：

这不起作用，因为该事件仅在您将鼠标悬停在 li 上时才会触发。

('li').mouseover(function(e)  );

当一个项目被拖动时，您需要能够知道鼠标相对于视口的位置。当用户开始拖动项目时，将“mousemove”事件附加到主体，然后在其中检查鼠标位置并在必要时滚动。

$("body").on("mousemove", function(event) 
// Check mouse position - scroll if near bottom or top
);

不要忘记在用户停止拖动时删除您的事件。

$("body").off("mousemove", function(event) 
// Check mouse position - scroll if near bottom or top
);

【讨论】：

谢谢乔恩！我将努力尝试用这个想法来实现它，但乍一看，这似乎解决了我使用哪个事件的困境。如果您可以提供有关计算相对于当前视口的光标位置的公式/逻辑的任何其他内容，我也很想听听！谢谢！

只要我能让它发挥作用，大多数人肯定会接受你的回答。我没有忘记你！ （但是鼠标定位逻辑现在真的难倒我，最坏的情况我会接受你的，因为你首先回答了有用的信息）

有什么特别困扰你？

基本上，使用上述变量，试图找到一种动态方法来计算鼠标的位置，并决定我应该向上还是向下滚动。此外，弄清楚如何循环效果或迭代效果，直到用户移动鼠标或放开他们拖动的 li 项目。类似于： if (cursor.y > scrolltop() + $userScreenHeight) scrollBy(0,-rate) else if ( cursor.y 。更喜欢动态计算速率，但将其硬编码为 3 很好，并且可以提供用户可以看到的合理滚动。

您不需要迭代它 - 每次移动鼠标时都会触发 mousemove 事件。如果您在拖动开始时添加事件并在拖动停止时将其删除，那么除了计算鼠标与屏幕顶部或底部的距离外，您无需担心任何事情。您也可以通过增加鼠标越靠近屏幕顶部或底部来改变速率（尽管我会让它以恒定的滚动速率工作，然后再担心）。

【参考方案3】：

这可能不是您想要的，但它可能会有所帮助。当鼠标悬停在“屏幕边框”（用户定义的区域）上时，它将自动滚动。假设屏幕右侧有一个 40px 宽的条，如果鼠标到达第一个 1px，它将开始滚动。你每移动一个像素，速度就会增加。它甚至还有一个不错的缓动动画。

http://www.smoothdivscroll.com/v1-2.htm

【讨论】：

看起来很有趣，我明天早上去看看

当然很有帮助，可能是这个解决方案最优雅的形式，但是我需要稍微改进一下。目前，该插件仅配置为左右滚动，而不是上下滚动。我想改变它应该不会太难，如果可以的话，这将是完美的解决方案。不过现在工作太多了！感谢您的回答

【参考方案4】：

我收到来自 CodeProject 的每周简报（电子邮件），其中包含一些看起来肯定会解决我的问题的内容......希望这可以帮助其他人：

http://johnpolacek.github.com/scrollorama/ -- 基于 JQuery 并为滚动设置动画

https://github.com/IanLunn/jQuery-Parallax -- 基于JQuery，类似上面

http://remysharp。 com/2009/01/26/element-in-view-event-plugin/ -- JQuery，检测元素当前是否在用户的视野中（对这个问题非常有帮助！）

#2 中的网站也有一些有趣的代码：

var windowHeight = $window.height();
var navHeight = $('#nav').height() / 2;
var windowCenter = (windowHeight / 2);
var newtop = windowCenter - navHeight;
//ToDo: Find a way to use these vars and my original ones to determine scroll regions