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

Question

很简单,我只想这样,当用户拖动一个项目并且它们到达视口的最底部或顶部(10px左右)时,页面(大约3000px长)轻轻向下或向上滚动,直到它们移动他们的光标(以及被拖动的项目)离开该区域.

项是一个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()