Как узнать направление скроллинга в jQuery

Как узнать направление скроллинга в jQuery

Чтобы узнать в каком направлении пользователь скролит страницу или блок, достаточно проверить свойство event.originalEvent.wheelDelta в обработчике событии прокрутки колёсика мыши wheel (устаревшее mousewheel и DOMMouseScroll).

Если число положительное, то идет скроллинг вверх, если отрицательное – вниз.

Пример:

$(document).on('wheel', function(e){
	if (e.originalEvent.wheelDelta >= 0) {
		console.log('Вверх');
	} else {
		console.log('Вниз');
	}
});

JS

Результат:

Но данный пример не работает на мобильных, в них нужно использовать событие 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;
});
JS

Как отследить остановку скроллинга?

Решение простое – добавить 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);
});
JS

Результат:

06.10.2021
169
Предыдущая запись Пауза в setInterval()

Комментарии

, чтобы добавить комментарий.

Другие публикации

Кнопки прокрутки страницы вверх и вниз jQuery
Несколько примеров как сделать кнопки прокрутки страницы вверх и вниз. Для скроллинга используется jQuery функция...
16190
+2
Подгрузка контента при прокрутке (бесконечная лента)
Пример реализации «Бесконечной ленты» с применением PHP, БД MySQL, и JQuery Ajax.
9529
+8
Как узнать что пользователь перешел на другую вкладку или свернул браузер
В случаях когда пользователь свернул окно браузера или перешел на другую вкладку, есть смысл отключить ненужные сетевые...
3643
+5
Фиксированное горизонтальное меню с активными пунктами
Пример горизонтального меню для лэндингов, в котором реализовано...
8313
+5
Contenteditable – текстовый редактор
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
20463
+22
Главное меню для мобильной версии сайта
Не очень сложное раскрывающееся меню для мобильной версии сайта на JQuery.
26397
+8