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

Question

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

我正在使用 Nestable不可拖动()

Answer 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 文档:

• .mousemove()
• .innerHeight()
• .scrollTop()
• .offset()
• .animate()