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

Question

很简单，我只是想拥有它，以便当用户拖动项目并到达视口的最底部或顶部（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) 滚动页面并具有以下变量：

1. e .pageY ...提供绝对页面上光标的 Y 坐标（不相对于屏幕）
2. $.scrollTop() ... 提供距页面顶部的偏移量（当滚动条一直向上时，为 0）
3. $.height()... 提供用户浏览器/视口中可视区域的高度
4. body.offsetHeight ...整个页面的高度

我怎样才能实现这个以及哪个事件最适合这个（当前它在鼠标悬停中）？ 我的想法：

1. 使用 if/else 来检查它是在顶部区域还是底部，如果 e.pageY 显示它在顶部，则向上滚动，如果 e.page& 则向下滚动。位于底部，然后调用 $('li').mouseover() 事件来迭代...
2. 使用 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);
      });

Answer 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()

Answer 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
});

Answer 3

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

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

Answer 4

我从 CodeProject 收到每周时事通讯（电子邮件），其中有一些内容看起来肯定会解决我的问题...希望这可以帮助其他人：

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

2. < a href="https://github.com/IanLunn/jQuery-Parallax" rel="nofollow">https://github.com/IanLunn/jQuery-Parallax -- 基于 JQuery，类似于上面

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

4. 还有 #2 中的站点有一些有趣的代码：

   var windowHeight = $window.height();
   var navHeight = $('#nav').height() / 2;
   var windowCenter = (windowHeight / 2);
   var newtop = windowCenter - navHeight;
   //ToDo：找到一种方法来使用这些变量和我原来的变量来确定滚动区域