Как распознать движение страницы вниз или вверх с помощью jquery?

Пользователь

от hobart.rath , в категории: JavaScript , 10 месяцев назад

Как распознать движение страницы вниз или вверх с помощью jquery?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от stephania , 10 месяцев назад

@hobart.rath 

Для распознавания движения страницы вниз или вверх с помощью jQuery можно использовать метод scroll() и переменную для хранения предыдущего значения скролла. Пример:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
var lastScrollTop = 0;
$(window).scroll(function() {
   var currentScrollTop = $(this).scrollTop();
   if (currentScrollTop > lastScrollTop){
    // движение вниз
   } else {
    // движение вверх
   }
   lastScrollTop = currentScrollTop;
});


В этом примере мы прикрепляем функцию к событию прокрутки окна и проверяем текущее значение прокрутки (scrollTop()) с предыдущим сохраненным значением (lastScrollTop). Если текущее значение больше, то происходит движение вниз, если меньше - движение вверх. Затем мы обновляем значение lastScrollTop на текущее значение прокрутки.

Пользователь

от cooper.berge , 22 дня назад

@hobart.rath 

Также есть еще один способ использования событий scroll и delta для определения движения страницы вверх или вниз. Вот пример:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
var lastScrollTop = 0;
$(window).on('wheel', function(e) {
    var currentScrollTop = $(this).scrollTop();
    var delta = e.originalEvent.deltaY;

    if (delta > 0) {
        // движение вниз
        console.log('down');
    } else {
        // движение вверх
        console.log('up');
    }

    lastScrollTop = currentScrollTop;
});


В этом примере мы используем событие wheel, чтобы отслеживать прокрутку страницы с помощью колесика мыши. При этом определяем направление прокрутки, используя свойство deltaY объекта originalEvent, где положительное значение означает движение вниз, а отрицательное - вверх.