Чтобы узнать в каком направлении пользователь скролит страницу или блок, достаточно проверить свойство event.originalEvent.wheelDelta в обработчике событии прокрутки колёсика мыши wheel (устаревшее mousewheel и DOMMouseScroll).
Если число положительное, то идет скроллинг вверх, если отрицательное – вниз.
Пример:
$(document).on('wheel', function(e){
if (e.originalEvent.wheelDelta >= 0) {
console.log('Вверх');
} else {
console.log('Вниз');
}
});
Результат:
Но данный пример не работает на мобильных, в них нужно использовать событие touchmove, которое срабатывает при движении пальцем по экрану.
var last;
$(document).bind('touchmove', function(e){
var current = e.originalEvent.touches[0].clientY;
if(current > last){
console.log('Движение пальцем вниз');
} else if(current < last){
console.log('Движение пальцем вверх');
}
last = current;
});Как отследить остановку скроллинга?
Решение простое – добавить clearTimeout(), который сработает если какое то время не будет скролла.
var timer;
$(window).on('wheel', function(e){
if (e.originalEvent.wheelDelta >= 0){
console.log('Вверх');
clearTimeout(timer);
} else {
console.log('Вниз');
clearTimeout(timer);
}
timer = window.setTimeout(function(){
console.log('Остановлено');
}, 500);
});
