当光标位于屏幕的顶部或底部边缘时，如何使用JQuery / Javascript向下滚动页面？ [英] How use JQuery/Javascript to scroll down a page when the cursor at the top or bottom edge of the screen?

问题描述

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

Simple, I just would like to have it so when a user is dragging an item and they reach the very bottom or top of the viewport (10px or so), the page (about 3000px long) gently scrolls down or up, until they move their cursor (and thus the item being dragged) out of the region.

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

An item is an li tag which uses jquery to make the list items draggable. To be specific:

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


• http://code.jquery.com/jquery-1.6.2。 min.js

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

我目前使用window.scrollBy（x = 0，y = 3）滚动页面变量为：

I currently use window.scrollBy(x=0,y=3) to scroll the page and have the variables of:

1. e.pageY ...提供页面上光标的绝对Y坐标（不是相对于屏幕）


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


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


4. body.offsetHeight ...整个页面的高度

1. e.pageY ... provides absolute Y-coordinates of cursor on page (not relative to screen)
2. $.scrollTop() ... provides offset from top of page (when scroll bar is all the way up, it is 0)
3. $.height()... provides the height of viewable area in the user's browser/viewport
4. body.offsetHeight ... height of the entire page

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

How can I achieve this and which event best accommodates this (currently its in mouseover)? My ideas:

1. 使用if / else来检查它是在顶部区域还是在底部，如果是e则向上滚动.pageY显示它在顶部，如果e.page&在底部，然后调用$（'li'）。mouseover（）事件来迭代...
   
   

1. use a an if/else to check if it is in top region or bottom, scroll up if e.pageY is showing it is in the top, down if e.page& is in bottom, and then calling the $('li').mouseover() event to iterate through...

1. 使用做while while循环......实际上它运作得很好，但很难停止滚动到远处。但我不知道如何控制迭代....

My最新尝试：

          ('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").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()

这篇关于当光标位于屏幕的顶部或底部边缘时，如何使用JQuery / Javascript向下滚动页面？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！