Как прокручивать окно автоматически, когда мышь перемещается в нижней части страницы с помощью jquery

У меня есть 50 div, но в моем окне это показывает только 25, я перетаскиваю активность на эти divs .So. Если я перетащил свой первый div около 25-го div, он должен прокручиваться автоматически, чтобы показать оставшиеся divs .How do Я делаю это в jquery? любая идея?

Я использую Nestable не draggable()

Ответ 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:

Ответ 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();
        }
    }
});