当鼠标使用jquery移动到页面底部时，如何自动滚动窗口 [英] How to scroll the window automatically when mouse moves bottom of the page using jquery

问题描述

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

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?

我使用 Nestable 不可拖动（）

推荐答案

根据具体的使用情况，这需要进行一些微调，但看起来效果还算不错。

This will need some fine tuning depending on your specific use case but it seems to work fairly well.

工作示例

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（）

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

这篇关于当鼠标使用jquery移动到页面底部时，如何自动滚动窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！