当光标位于屏幕的顶部或底部边缘时，如何使用 JQuery/Javascript 向下滚动页面？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9113364/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How use JQuery/Javascript to scroll down a page when the cursor at the top or bottom edge of the screen?
提问by webDevAndEverythingElse
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.
很简单，我只是想要这样当用户拖动一个项目并且他们到达视口的最底部或顶部（10px 左右）时，页面（大约 3000px 长）轻轻向下或向上滚动，直到它们移动他们的光标（以及被拖动的项目）离开区域。
An item is an li tag which uses jquery to make the list items draggable. To be specific:
一个项目是一个 li 标签，它使用 jquery 使列表项目可拖动。再具体一点：
- ../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
I currently use window.scrollBy(x=0,y=3) to scroll the page and have the variables of:
我目前使用 window.scrollBy(x=0,y=3) 滚动页面并具有以下变量：
- e.pageY ... provides absolute Y-coordinates of cursor on page (not relative to screen)
- $.scrollTop() ... provides offset from top of page (when scroll bar is all the way up, it is 0)
- $.height()... provides the height of viewable area in the user's browser/viewport
- body.offsetHeight ... height of the entire page
- e.pageY ... 提供页面上光标的绝对 Y 坐标（与屏幕无关）
- $.scrollTop() ... 提供从页面顶部的偏移量（当滚动条一直向上时，它是 0）
- $.height()... 提供用户浏览器/视口中可视区域的高度
- body.offsetHeight ... 整个页面的高度
How can I achieve this and which event best accommodates this (currently its in mouseover)? My ideas:
我怎样才能做到这一点，哪个事件最适合这个（目前它在鼠标悬停中）？我的想法：
- 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...
- Use a do while loop... this has worked moderately well actually, but is hard to stop from scrolling to far. But I am not sure how to control the iterations....
- 使用 if/else 检查它是在顶部区域还是底部，如果 e.pageY 显示它在顶部，则向上滚动，如果 e.page& 在底部，则向下滚动，然后调用 $('li') .mouseover() 事件遍历...
- 使用 do while 循环……这实际上效果不错，但很难停止滚动到很远。但我不确定如何控制迭代......
My latest attempt:
我最近的尝试：
('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);
});
采纳答案by webDevAndEverythingElse
Works pretty well now, user just needs to "jiggle" the mouse when dragging items sometimes to keep scrolling, but for scrolling just with mouse position its pretty solid. Here is what I finally ended up using:
现在效果很好，用户有时只需要在拖动项目时“摇晃”鼠标即可保持滚动，但对于仅使用鼠标位置滚动来说，它非常可靠。这是我最终使用的：
$("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()
回答by icetbr
This may not be exactly what you want, but it might help. It will auto-scroll when the mouse is over the 'border of the screen' (a user defined region). Say you have a 40px wide bar on the right of the screen, if the mouse reaches the first 1px, it will start scrolling. Each px you move into it, the speed will increase. It even has a nice easing animation.
这可能不是您想要的，但它可能会有所帮助。当鼠标位于“屏幕边界”（用户定义的区域）上时，它将自动滚动。假设您在屏幕右侧有一个 40px 宽的栏，如果鼠标到达前 1px，它将开始滚动。你每移动一个像素，速度就会增加。它甚至有一个很好的缓动动画。
回答by Jon
This won't work as the event only fires while you're mouse is over the li.
这将不起作用，因为该事件仅在您将鼠标悬停在 li 上时才会触发。
('li').mouseover(function(e) { });
You need to be able to tell the position of the mouse relative to the viewport when an item is being dragged. When the users starts to drag an item attach an 'mousemove' event to the body and then in that check the mouse position and scroll when necessary.
当一个项目被拖动时，你需要能够告诉鼠标相对于视口的位置。当用户开始拖动一个项目时，将一个 'mousemove' 事件附加到主体上，然后检查鼠标位置并在必要时滚动。
$("body").on("mousemove", function(event) {
// Check mouse position - scroll if near bottom or top
});
Dont forget to remove your event when the user stops dragging.
不要忘记在用户停止拖动时删除您的事件。
$("body").off("mousemove", function(event) {
// Check mouse position - scroll if near bottom or top
});
回答by webDevAndEverythingElse
I get a weekly newsletter (email) from CodeProject, and it had some stuff that certainly looks like it will solve my problem... hopefully this can help others:
我收到了来自 CodeProject 的每周时事通讯（电子邮件），其中有些内容看起来肯定会解决我的问题……希望这可以帮助其他人：
http://johnpolacek.github.com/scrollorama/-- JQuery based and animates the scroll
https://github.com/IanLunn/jQuery-Parallax-- JQuery based, similar to above
http:// remysharp. com/2009/01/26/element-in-view-event-plugin/ -- JQuery, detects whether an element is currently in view of the user (super helpful for this issue!)
Also the site in #2 had some interesting code:
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
http://johnpolacek.github.com/scrollorama/——基于 JQuery 的滚动动画
https://github.com/IanLunn/jQuery-Parallax-- 基于 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
