Как прокручивать окно автоматически, когда мышь перемещается в нижней части страницы с помощью 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();
}
}
});