Артём Мáлков

Как отследить вертикальное направление прокрутки страницы/элемента на JavaScript/jQuery?

7 июл1 комм

Несколько лет назад, почитывая разные сообщества, посвященные веб-разработке, я наткнулся на пост, в котором человек спрашивал о том, как определить направление вертикальной прокрутки. Вопрос мне показался интересным, и я добавил его в закладки (не было в тот момент времени на него отвечать). Не знаю, получил ли он ответ на свой вопрос и какие решения были ему предложены, но я поделюсь своим. Рассматривать мы с вами будем вариант на JavaScript, на jQuery я просто покажу эквивалент.

Определение направления вертикальной прокрутки страницы/элемента на JavaScript

Идея: при загрузке страницы устанавливаем (определяем) первую переменную со значением текущей прокрутки страницы, после прокрутки – устанавливаем актуальное значение с текущей прокруткой во вторую переменную, сравниваем, что больше (получая нужный результат), и обновляем значение первой переменной.

Всё это станет понятнее, если посмотреть на реализацию:

document.addEventListener("DOMContentLoaded", function() {

	let old_value = window.pageYOffset || document.documentElement.scrollTop,
		scroll_top;

	window.addEventListener("scroll", function() {

		scroll_top = window.pageYOffset || document.documentElement.scrollTop; // Текущая прокрутка с учётом IE8

		if(old_value > scroll_top) {

			// Действие, при прокрутке наверх

	 	} else if(old_value < scroll_top) {

			// Действие, при прокрутке вниз

	 	}

		old_value = scroll_top;

	});

});

Небольшое пояснение: так как мы используем событие scroll для отслеживания прокрутки, то я использовал не else, а else if, так как при old_value = scroll_top (при таком коде) будет означать, что сработала горизонтальная прокрутка. Если хотите, можете добавить это третье состояние:

if(old_value > scroll_top) {

	// Действие, при прокрутке наверх

} else if(old_value < scroll_top) {

	// Действие, при прокрутке вниз

} else {

	// Действие, при горизонтальной прокрутке

}

Решение проверено на: прокрутке колёсиком мыши, прокрутке на стрелки, полосе прокрутки, android-устройстве. Не воспринимайте его как исключительное, думаю, в нём могут быть огрехи на некоторых устройствах, но, в целом, оно сможет закрыть большую часть ваших вопросов.

Если вы хотите отследить прокрутку не страницы, а элемента, используйте следующий вариант на основе предыдущего:

document.addEventListener("DOMContentLoaded", function() {

	let old_value = document.querySelector(".container").scrollTop,
		scroll_top;

	document.querySelector(".container").addEventListener("scroll", function() {

		scroll_top = document.querySelector(".container").scrollTop;

		if(old_value > scroll_top) {

			// Действие, при прокрутке наверх

		} else if(old_value < scroll_top) {

			// Действие, при прокрутке вниз

		}

		old_value = scroll_top;

	});

 });

.container здесь – идентификатор (класс) нужного элемента с прокруткой.

Определение направления вертикальной прокрутки страницы/элемента на jQuery

На jQuery решение задачи (определение направления вертикальной прокрутки страницы) выглядит аналогично:

$(document).ready(function() {

	let old_value = $(document).scrollTop(),
		scroll_top;

	$(document).scroll(function() {

		scroll_top = $(document).scrollTop();

		if(old_value > scroll_top) {

			// Действие, при прокрутке наверх

		} else if(old_value < scroll_top) {

			// Действие, при прокрутке вниз

		}

		old_value = scroll_top;

	});

});

И то же самое для элемента:

$(document).ready(function() {

	let old_value = $(".container").scrollTop(),
		scroll_top;

	$(".container").scroll(function() {

		scroll_top = $(".container").scrollTop();

		if(old_value > scroll_top) {

			// Действие, при прокрутке наверх

		} else if(old_value < scroll_top) {

			// Действие, при прокрутке вниз

		}

		old_value = scroll_top;

	});

});

А о том, как отследить направление горизонтальной прокрутки (страницы и элемента), вы сможете почитать в комментариях к данному посту.

Рекомендуем к просмотру
Как отследить направление прокрутки страницы на сайте на jQuery?
Статьи и советы
Плавная прокрутка страницы до нужного блока на jQuery
Модули и скрипты
Кроссбраузерная стилизация полосы прокрутки (ScrollBar) на jQuery
Модули и скрипты
1
комментарий
Форма комментирования этого поста скрыта. Авторизуйтесь, чтобы расширить привилегии гостевого посещения и получить необходимую помощь от сообщества Pandoge.
    • 2
    1070
      •  Команда Pandoge
    7 июл в 15:24

    Как и обещал, держите вариант для определения направления горизонтальной прокрутки страницы на JavaScript:

    document.addEventListener("DOMContentLoaded", function() {
    
    	let old_value = window.pageXOffset || document.documentElement.scrollLeft,
    		scroll_left;
    
    	window.addEventListener("scroll", function() {
    
    		scroll_left = window.pageXOffset || document.documentElement.scrollLeft; // Текущая прокрутка с учётом IE8
    
    		if(old_value > scroll_left) {
    
    			// Действие, при прокрутке влево
    
    	 	} else if(old_value < scroll_left) {
    
    			// Действие, при прокрутке вправо
    
    	 	}
    
    		old_value = scroll_left;
    
    	});
    
    });

    Определение направления горизонтальной прокрутки элемента на JavaScript:

    document.addEventListener("DOMContentLoaded", function() {
    
    	let old_value = document.querySelector(".container").scrollLeft,
    		scroll_left;
    
    	document.querySelector(".container").addEventListener("scroll", function() {
    
    		scroll_left = document.querySelector(".container").scrollLeft;
    
    		if(old_value > scroll_left) {
    
    			// Действие, при прокрутке влево
    
    		} else if(old_value < scroll_left) {
    
    			// Действие, при прокрутке вправо
    
    		}
    
    		old_value = scroll_left;
    
    	});
    
    });
Подняться наверх
«Pandoge» – опыт, берегущий время