Как отследить вертикальное направление прокрутки страницы/элемента на JavaScript/jQuery?
Несколько лет назад, почитывая разные сообщества, посвященные веб-разработке, я наткнулся на пост, в котором человек спрашивал о том, как определить направление вертикальной прокрутки. Вопрос мне показался интересным, и я добавил его в закладки (не было в тот момент времени на него отвечать). Не знаю, получил ли он ответ на свой вопрос и какие решения были ему предложены, но я поделюсь своим. Рассматривать мы с вами будем вариант на 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;
});
});А о том, как отследить направление горизонтальной прокрутки (страницы и элемента), вы сможете почитать в комментариях к данному посту.
