javascript 如何使用jquery在鼠标移动到页面底部时自动滚动窗口
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17895141/
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 to scroll the window automatically when mouse moves bottom of the page using jquery
提问by Achaius
I have 50 divs,But in my window it shows only 25,I do drag and drop activity on these divs.So If i drag my first div near 25th div,It should scroll automatically to show the remaining divs.How do i do this in jquery? any idea?
我有 50 个 div，但在我的窗口中它只显示 25 个，我在这些 div 上进行拖放活动。所以如果我在第 25 个 div 附近拖动我的第一个 div，它应该自动滚动以显示剩余的 div。我该怎么做在 jquery 中？任何的想法？
I am using Nestablenot draggable()
我正在使用Nestable不可拖动（）
采纳答案by apaul
This will need some fine tuning depending on your specific use case but it seems to work fairly well.
这将需要根据您的特定用例进行一些微调，但它似乎工作得很好。
$('.dd').nestable({ /* config options */
});
$(window).mousemove(function (e) {
var x = $(window).innerHeight() - 50,
y = $(window).scrollTop() + 50;
if ($('.dd-dragel').offset().top > x) {
//Down
$('html, body').animate({
scrollTop: 300 // adjust number of px to scroll down
}, 600);
}
if ($('.dd-dragel').offset().top < y) {
//Up
$('html, body').animate({
scrollTop: 0
}, 600);
} else {
$('html, body').animate({
});
}
});
Related API documentation:
相关API文档：
回答by Hamed Khosravi
If you want to know bottom of window you can check
如果你想知道窗口的底部，你可以检查
$(window).height()
and $(window).scrollTop();
和$(window).scrollTop()；
回答by Mencey
I know this is an old topic but since this feature keeps in standby, I just improved apaul34208's code, hope it helps
我知道这是一个老话题，但由于此功能一直处于待机状态，我只是改进了 apaul34208 的代码，希望对您有所帮助
$(window).mousemove(function (e) {
if ($('.dd-dragel') && $('.dd-dragel').length > 0 && !$('html, body').is(':animated')) {
var bottom = $(window).height() - 50,
top = 50;
if (e.clientY > bottom && ($(window).scrollTop() + $(window).height() < $(document).height() - 100)) {
$('html, body').animate({
scrollTop: $(window).scrollTop() + 300
}, 600);
}
else if (e.clientY < top && $(window).scrollTop() > 0) {
$('html, body').animate({
scrollTop: $(window).scrollTop() - 300
}, 600);
} else {
$('html, body').finish();
}
}
});
回答by Alexis D.
A bit of an improvement on Mencey's code. A caveat it might have is that it's based on an interval fired every 16 milliseconds instead of mousemove(). I don't know how taxing this may be, so feel free to increase the number of milliseconds or fire a clearInterval at some point. The benefit from this is the scrolling is continuous, instead of having to wiggle the mouse as 1j01 pointed out.
对 Mency 的代码进行了一些改进。它可能有一个警告，它基于每 16 毫秒触发的间隔而不是 mousemove()。我不知道这会有多繁重，所以可以随意增加毫秒数或在某个时候触发 clearInterval。这样做的好处是滚动是连续的，而不必像 1j01 指出的那样摆动鼠标。
You may also change the speedand zonevariables, zonebeing an area in pixels at the top and the bottom of the window where you can drag the item. As you get closer to the top or the bottom of the window, the scrolling speed goes up as it compares the distance between the position of the mouse and the actual edge of the window, giving some control to the user on the scrolling speed.
您还可以更改speed和zone变量，zone即窗口顶部和底部的像素区域，您可以在其中拖动项目。当您靠近窗口的顶部或底部时，滚动速度会随着鼠标位置与窗口实际边缘之间的距离的比较而加快，从而为用户提供了对滚动速度的一些控制。
var mouseY;
var speed = 0.15;
var zone = 50;
$(document).mousemove(function(e){
mouseY = e.pageY - $(window).scrollTop();
}).mouseover();
var dragInterval = setInterval(function(){
if ($('.dd-dragel') && $('.dd-dragel').length > 0 && !$('html, body').is(':animated')) {
var bottom = $(window).height() - zone;
if (mouseY > bottom && ($(window).scrollTop() + $(window).height() < $(document).height() - zone)) {
$('html, body').animate({scrollTop: $(window).scrollTop() + ((mouseY + zone - $(window).height()) * speed)},0);
}
else if (mouseY < zone && $(window).scrollTop() > 0) {
$('html, body').animate({scrollTop: $(window).scrollTop() + ( (mouseY - zone) * speed) },0);
} else {
$('html, body').finish();
}
}
},16);
