当鼠标移动到页面底部时如何使用jquery自动滚动窗口答案

【问题标题】：How to scroll the window automatically when mouse moves bottom of the page using jquery当鼠标移动到页面底部时如何使用jquery自动滚动窗口
【发布时间】：2013-07-27 06:55:41
【问题描述】：

我有 50 个 div，但在我的窗口中它只显示 25 个，我在这些 div 上进行拖放活动。所以如果我将我的第一个 div 拖到第 25 个 div 附近，它应该会自动滚动以显示剩余的 div。如何做我在 jquery 中这样做？有什么想法吗？

我正在使用Nestable not draggable()

【问题讨论】：

滚动事件可以手动触发，如下所述：developer.mozilla.org/en-US/docs/Web/API/window.scroll 但是，因为您专门使用 jQuery 的拖放，我认为将元素拖到浏览器窗口底部会触发滚动事件？
如何知道元素拖动时何时到达窗口底部？
我认为它是自动完成的。 ktstowell.github.io/angular-file-utils/#我在这里使用拖放。当我将左侧的项目拖到窗口底部时，浏览器会滚动到折叠下方的内容。
您可以将您的具体代码添加到问题中吗？它可能会帮助将来遇到类似问题的其他人。
有关您编写的代码问题的问题必须在问题本身中描述具体问题 - 并包括重现问题的有效代码。

标签： javascript jquery jquery-ui

【解决方案1】：

这将需要根据您的具体用例进行一些微调，但它似乎工作得相当好。

Working Example

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

        });
    }
});

相关 API 文档：

【讨论】：

谢谢，这是我的预期。这个脚本工作正常。非常感谢。
这真的很不愉快。如果我继续在底部移动鼠标，它不会向下滚动，因为动画相互抵消，然后如果我从底部移回远离，它会开始滚动一些预定量。此外，它不会更新您拖动的项目的状态，直到/除非您移动鼠标。

【解决方案2】：

如果你想知道窗口的底部，你可以查看

$(window).height()

和$(window).scrollTop();

【讨论】：

【解决方案3】：

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

【讨论】：

这修复了其他动画的取消，但仍然不是很好。过渡是非线性的，因此假设您在向下滚动区域周围移动鼠标，它会开始和停止。如果您在完成动画时没有四处移动鼠标，它将停止滚动，直到您移动一个像素为止，即使您已暂停在向下滚动区域并开始将鼠标移开。

【解决方案4】：

对 Mencey 的代码进行了一些改进。它可能需要注意的是，它基于每 16 毫秒触发一次的间隔，而不是 mousemove()。我不知道这可能会带来多大的负担，因此请随意增加毫秒数或在某个时候触发 clearInterval。这样做的好处是滚动是连续的，而不是像 1j01 指出的那样摆动鼠标。

您还可以更改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);

【讨论】：