Определение направления прокрутки в jQuery: вверх или вниз

Быстрый ответ

Если вы хотите определить направление прокрутки страницы, можете использовать приведенный метод с применением функции scrollTop:

let lastScroll = 0;

$(window).scroll(() => {
  let currentScroll = $(this).scrollTop();
  console.log(currentScroll > lastScroll ? 'Вниз' : 'Вверх');
  lastScroll = currentScroll;
});

Мы выделяем изменение позиции прокрутки и выводим соответствующее направление: вниз или вверх. Используем тернарный оператор для сокращения записи кода.

Универсальный код, подходящий для всех браузеров

Когда мы отслеживаем направление прокрутки, очень важно обеспечить кросс-браузерную совместимость. Даже если функция scrollTop хорошо работает в большинстве браузеров, всегда полезно подстраховаться против возможных неожиданных различий в обработке событий.

Универсальное использование колеса мыши

Для обеспечения унификации работы с колесом мыши в различных браузерах применяйте свойство originalEvent из объекта события jQuery:

$(window).on('mousewheel DOMMouseScroll', function(event) {
  const delta = event.originalEvent.wheelDelta || -event.originalEvent.detail;
  console.log(delta > 0 ? 'Вверх' : 'Вниз');
  event.preventDefault(); // Предотвращение стандартной прокрутки
});

В этом коде событие mousewheel относится к прокрутке в браузерах Chrome и Safari, а DOMMouseScroll – используется в Firefox. wheelDelta помогает стандартизировать интерпретацию направления прокрутки.

Подробнее об этом расскажет наш спикер на видео

Избавление от глобальных переменных

Как правило, лучше инкапсулировать переменные в функцию или прибегать к модульному паттерну JavaScript. Это поможет избежать возможных конфликтов в глобальном пространстве и облегчит поддержку кода.

Анализ крайних случаев и влияние на производительность

Частое срабатывание событий прокрутки может негативно отразиться на производительности. Для более эффективной обработки событий можно применить такие подходы как дебаунсинг или троттлинг.

Троттлинг для умеренной обработки событий

Троттлинг позволяет ограничить частоту обработки событий:

function throttle(func, limit) {
  let lastFunc;
  let lastRan;
  return function() {
    const context = this;
    const args = arguments;
    if (!lastRan) {
      func.apply(context, args);
      lastRan = Date.now();
    } else {
      clearTimeout(lastFunc);
      lastFunc = setTimeout(function() {
        if ((Date.now() – lastRan) >= limit) {
          func.apply(context, args);
          lastRan = Date.now();
        }
      }, limit – (Date.now() – lastRan));
    }
  }
}

let lastScrollTop = 0;
const throttledScroll = throttle(function() {
  let currentScroll = $(this).scrollTop();
  console.log(currentScroll > lastScrollTop ? 'Вниз' : 'Вверх');
  lastScrollTop = currentScroll;
}, 100);

$(window).scroll(throttledScroll);

Такой подход уменьшает количество вызовов функций отслеживания прокрутки, улучшая тем самым взаимодействие пользователя с сайтом и повышая производительность.

Обработка крайних ситуаций

Становится очень важно разработать защитные механизмы для случаев, когда пользователь достигает верхней или нижней части страницы, где позиция прокрутки остается неизменной. Такие ситуации требуют особого учета и детального проработывания специальных условий.

Визуализация

Для лучшей наглядности отслеживания прокрутки можно представить следующим образом:

🔼 для перемещения вверх, словно поднятие орла, и
🔽 для перемещения вниз, подобно действию гравитации.

В дополнение, мы можем визуализировать направление прокрутки с помощью иконок:

let lastScrollTop = 0;

$(window).scroll(function() {
  let currentScroll = $(this).scrollTop();
  if (currentScroll > lastScrollTop){
    console.log('🔽 Прокрутка вниз');
  } else {
    console.log('🔼 Прокрутка вверх');
  }
  lastScrollTop = currentScroll;
});

Следите за направлением, как за стрелкой компаса, и наблюдайте его в консоли.

Улучшение ваших навыков: сложные условия и практическое применение

Применение нативных свойств событий

В определенных случаях следует использовать особые свойства объекта события, предоставляемые браузером:

$(window).scroll(function(event) {
  var originalEvent = event.originalEvent;
  // Доступ к детальным данным о событии прокрутки
});

Понимание практического применения

Определение направления прокрутки может пригодиться для реализации анимаций, ленивой загрузки изображений, динамического изменения макетов страницы в ответ на действия пользователя. Это играет большую роль в создании пользовательского опыта.

Полезные материалы

1. scroll event | jQuery API Documentation — подробная информация о функции прокрутки в jQuery.
2. javascript – Detecting scroll direction – Stack Overflow — обсуждение методов определения направления прокрутки.
3. Event reference | MDN — справочник по событиям от MDN.
4. Debouncing and Throttling Explained Through Examples | CSS-Tricks — объяснение дебаунсинга и троттлинга на примерах.
5. Event Object | jQuery API Documentation — развернутая информация о свойствах и методах объекта событий jQuery.
6. Bubbling and capturing — руководство по всплытию и захвату событий.
7. JavaScript Debounce Function — реализация функции дебаунсинга на JavaScript по версии Дэвида Уолша.