Javascript 如何使用jquery在鼠标移动页面底部时自动滚动窗口

我有50个div，但在我的窗口中，它只显示25个div，我在这些div上执行拖放操作。因此，如果我将第一个div拖动到第25个div附近，它将自动滚动以显示剩余的div。我如何在jquery中执行此操作？有什么想法吗

---

我使用的是not draggable（）

若你们想知道窗口的底部，你们可以查看

$(window).height()

---

和

$（窗口）
 这需要根据您的特定用例进行一些微调，但似乎效果相当不错


$('.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({

        });
    }
});

$（'.dd'）。可嵌套（{/*配置选项*/
});
$（窗口）.mousemove（函数（e）{
变量x=$（窗口）.innerHeight（）-50，
y=$（窗口）.scrollTop（）+50；
如果（$（'.dd dragel'）.offset（）.top>x）{
//向下
$（'html，body'）。设置动画({
scrollTop:300//调整px的数量以向下滚动
}, 600);
}
if（$（'.dd dragel'）.offset（）.top

相关API文档：







我知道这是一个老话题，但由于此功能一直处于待机状态，我只是改进了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();
        }
    }
});

$（窗口）.mousemove（函数（e）{
如果（$（'.dd dragel'）&&（'.dd dragel'）.length>0&！$（'html，body'）。是（':animated'））{
var bottom=$（窗口）.height（）-50，
top=50；
如果（e.clientY>bottom&（$（窗口）.scrollTop（）+$（窗口）.height（）<$（文档）.height（）-100））{
$（'html，body'）。设置动画({
scrollTop:$（窗口）.scrollTop（）+300
}, 600);
}
else if（e.clientY0）{
$（'html，body'）。设置动画({
scrollTop:$（窗口）.scrollTop（）-300
}, 600);
}否则{
$（'html，body'）.finish（）；
}
}
});
对门西的代码有一点改进。它可能需要注意的是，它基于每16毫秒触发一次的间隔，而不是mousemove（）。我不知道这会有多累人，所以请随意增加毫秒数或在某个点触发clearInterval。这样做的好处是滚动是连续的，而不是像1j01所指出的那样晃动鼠标

您还可以更改
速度
和
区域
变量，
区域
是窗口顶部和底部的一个像素区域，您可以在其中拖动项目。当您靠近窗口的顶部或底部时，滚动速度会随着鼠标位置与窗口实际边缘之间的距离的比较而提高，从而为用户提供滚动速度的一些控制

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);

var-mouseY；
无功转速=0.15；
可变区=50；
$（文档）.mousemove（函数（e）{
mouseY=e.pageY-$（窗口）.scrollTop（）；
}).mouseover（）；
var dragInterval=setInterval（函数（）{
如果（$（'.dd dragel'）&&（'.dd dragel'）.length>0&！$（'html，body'）。是（':animated'））{
var bottom=$（window）.height（）-区域；
如果（鼠标>底部（$（窗口）.scrollTop（）+$（窗口）.height（）<$（文档）.height（）-zone））{
$（'html，body'）.animate（{scrollTop:$（window.scrollTop（）+（（mouseY+zone-$（window.height（））*speed）}，0）；
}
else if（mouseY0）{
$（'html，body'）.animate（{scrollTop:$（window.scrollTop（）+（（mouseY-zone）*speed）}，0）；
}否则{
$（'html，body'）.finish（）；
}
}
},16);
Scroll事件可以手动触发，如下所述：但是，由于您专门使用jQuery的拖放功能，我认为将元素拖动到浏览器窗口底部会触发滚动事件？如何知道元素拖动时何时到达窗口底部？我认为这是自动完成的。我在这里使用拖放。当我将左侧的项目向下拖动到窗口底部时，浏览器会滚动到折叠下方的内容。您可以将您的特定代码添加到问题中吗？它可能会帮助将来遇到类似问题的其他人。有关您编写的代码问题的问题必须在问题本身中描述特定问题，并包括复制该问题的有效代码。谢谢，这是我所期望的。这个脚本很好用。非常感谢。这真的很不愉快。如果我一直在底部移动鼠标，它不会向下滚动，因为动画会相互抵消，然后如果我从底部向后移动，它会开始滚动预定的数量。此外，除非你移动鼠标，否则它不会更新你正在拖动的项目的状态。这修复了其他动画的取消，但仍然不是很好。转换是非线性的，所以假设您在向下滚动区域移动鼠标，它会开始和停止。如果在动画结束时不移动鼠标，它将停止滚动，直到移动像素为止，即使例如，您在向下滚动区域暂停并开始将鼠标移离它。