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

Question

简单，我只是想拥有它，所以当用户拖动一个项目并且他们到达视口(viewport)的最底部或顶部时(10px 左右)，页面< em>(大约 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()...提供用户浏览器/视口(viewport)中可视区域的高度
4. body.offsetHeight ...整个页面的高度

我怎样才能实现这个以及哪个事件最适合这个(目前它在鼠标悬停状态下)？ 我的想法:

1. 使用 if/else 检查它是在顶部还是底部，如果 e.pageY 显示它在顶部则向上滚动，如果 e.page& 在底部则向下滚动，然后调用 $(' li').mouseover() 事件遍历...
   1. 使用 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()