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

Question

我有50个div,但是在我的窗口中它只显示25个,我会在这些div上拖放活动.所以如果我将第一个div拖到25th div附近,它应该自动滚动以显示剩余的div.我该怎么做在jquery？任何的想法？

我正在使用Nestable而不是draggable()

Answer 1

这将需要一些微调,具体取决于您的具体用例,但它似乎工作得相当好.

工作实例

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