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

很简单，我只希望这样，当用户拖动一个项目时，他们到达视口的最底部或顶部（10px左右），页面（大约3000px长）会轻轻地向下或向上滚动，直到他们将光标（以及被拖动的项目）移出该区域

项是一个li标记，它使用jquery使列表项可拖动。具体而言：

• ../jquery-ui-1.8.14.custom.min.js

我目前使用window.scrollBy（x=0，y=3）来滚动页面，并具有以下变量：

e、 佩吉。。。提供页面上光标的绝对Y坐标（不相对于屏幕）

$.scrollTop（）。。。提供从页面顶部的偏移量（当滚动条一直向上时，为0）

$.height（）。。。提供用户浏览器/视口中可视区域的高度

身体，视线外。。。整页的高度

我如何实现这一点，以及哪个事件最适合这一点（目前在鼠标悬停中）？ 我的想法是：

使用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);
      });

（'li'）。鼠标悬停（函数（e）{
总高度=document.body.offsetHeight；
cursor.y=e.pageY；
var papaWindow=窗口；
var$pxFromTop=$（papaWindow.scrollTop（）；
var$userScreenHeight=$（papaWindow）.height（）；
var迭代=0；
做{
papaWindow.scrollBy（0,2）；
迭代++；
log（cursor.y、$pxFromTop、$userScreenHeight）；
}
而（迭代次数<20次）；
});

这将不起作用，因为事件仅在鼠标悬停在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
});

我从CodeProject收到了一份每周的时事通讯（电子邮件），其中有些东西看起来肯定能解决我的问题。。。希望这能帮助其他人：

--基于JQuery并设置滚动动画

--基于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

---

现在运行得很好，用户在拖动项目时只需“抖动”鼠标即可保持滚动，但对于仅使用鼠标位置滚动的项目，其效果相当稳定。以下是我最终使用的内容：

 $("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()

$（“li”）.mouseover（函数（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（）；
如果（cursor.y>（$userScreenHeight+$pxFromTop）/1.25））{
如果（$pxFromTop<（$userScreenHeight*3.2））{
papaWindow.scrollBy（0，（$userScreenHeight/30））；
}
}
else if（cursor.y<（$userScreenHeight+$pxFromTop）*.75））{
papaWindow.scrollBy（0，-（$userScreenHeight/30））；
}
}); //结束鼠标悬停（）

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

---

仅供参考，我只是担心新的浏览器，主要是FF和Chrome。。。IE 7或更低版本在我的“世界”中不存在嗨，你现在有解决这个问题的有效方法了吗？你能把它寄出去吗？我在这里发布了一个类似的问题：谢谢Jon！我将尝试用这个想法来实现它，但乍一看，这显然解决了我使用哪个事件的难题。如果您可以提供任何关于计算光标相对于当前视口位置的公式/逻辑的附加信息，我也很乐意听到！非常感谢。只要我能让你的答案发挥作用，我肯定会接受你的答案。我没有忘记你！（但是鼠标定位的逻辑现在真的让我很困惑，最糟糕的情况是我会接受你的，因为你首先回答了有用的信息）特别让你困惑的是什么？基本上，使用前面提到的变量，试图找到一种动态方法来计算鼠标的位置，并决定我应该向上还是向下滚动。此外，还要弄清楚如何循环效果或迭代效果，直到用户移动鼠标或放开正在拖动的li项。类似于：if（cursor.y>scrolltop（）+$userScreenHeight）{scrollBy（0，-rate）}或者if（cursor.y

---

• [jquery]相关文章推荐

• Jquery 当用户将鼠标悬停在另一个表上时，如何显示数据表'；s细胞？ jqueryhtml
• 使用jquery将完整表单数据发送到后端 jqueryjson
• 没有domready的jQuery jquery
• 无法使jQuery和RadioButtonList正常工作 jquery
• 使用键盘快捷键打开jQuery UI对话框会将按下的键放入对话框'；s形 jqueryjquery-uiforms
• jQuery即使在选择上单击/更改也不起作用 jquery
• Jquery 如何在鼠标移动时隐藏div，停止时显示div？ jquery
• 使用minicolors jquery jqueryjquery-uijquery-plugins
• codeigniter中的自定义jquery错误放置 jquerycodeigniter
• Jquery移动验证错误位置&；挑选 jqueryjquery-mobile
• 如何将css解释为jQuery？ jquery
• jQuery/循环/背景图像 jquerycss
• Jquery 当div的位置为绝对值时获取屏幕截图 jquery
• 使用jQuery在窗口滚动上设置Animated.css动画 jqueryhtmlcssanimation
• Jquery spellchek属性无法处理预加载的数据 jqueryhtml
• Jquery 403禁止使用ajax发送post DJANGO jquerypythonajaxdjango
• Jquery 未定义的错误继续显示速记if语句 jquery
• 在完全加载jQuery数据表后显示它 jqueryhtmldatatables
• Jquery Mongo-我应该使用两个集合，还是从一个集合创建一个数组？ jquerymongodbapidatabase-design
• Jquery 成功后返回空的Ajax响应 jqueryajax

---

• 随机文章推荐