Особенности работы на touch-устройствах

Headroom.js управляет видимостью элементов на основе направления прокрутки страницы. На десктопах основной механизм основан на событиях scroll, которые срабатывают при движении колесика мыши или тачпада. На touch-устройствах события прокрутки работают иначе: они генерируются не только при физическом перемещении контента, но и во время «инерционного» скролла после снятия пальца с экрана.

Важный момент: для корректной работы Headroom.js на мобильных устройствах используется событие touchmove, которое позволяет отслеживать движение пальца по экрану в реальном времени. При этом следует учитывать:

  • touchstart фиксирует начальную позицию пальца;
  • touchmove отслеживает перемещение и вычисляет разницу с предыдущей координатой;
  • touchend завершает событие и может инициировать инерционную прокрутку, которая влияет на работу алгоритма скрытия и показа шапки.

Чтобы минимизировать ложные срабатывания на touch-устройствах, Headroom.js применяет фильтрацию дребезга через минимальный порог смещения (tolerance). По умолчанию это значение может быть увеличено на мобильных устройствах, чтобы предотвратить постоянное скрытие и появление шапки при незначительных движениях пальца.

Настройка порога чувствительности

Параметр tolerance в конфигурации Headroom.js позволяет задать минимальное количество пикселей, которое должен пройти скролл, чтобы триггернуть событие показа или скрытия шапки. На touch-устройствах этот параметр особенно критичен из-за неравномерной природы прокрутки:

var header = document.querySelector("header");
var headroom  = new Headroom(header, {
  tolerance: { up: 15, down: 10 }, // увеличиваем для smoother опыта на touch
  offset: 50,
  classes: {
    pinned: "header-pinned",
    unpinned: "header-unpinned",
  }
});
headroom.init();

Здесь up отвечает за количество пикселей, необходимое для появления шапки при прокрутке вверх, а down — для скрытия при прокрутке вниз. На мобильных устройствах часто используют большее значение up, чтобы избежать постоянного мерцания при незначительном движении пальца.

Адаптация к «инерционному» скроллу

На iOS и Android после окончания жеста свайпа срабатывает инерционный скролл: страница продолжает двигаться некоторое время без взаимодействия пользователя. Headroom.js учитывает это, отслеживая разницу между предыдущей и текущей позицией контента даже без активного touchmove.

Особенности работы с инерцией:

  • Необходима оптимизация tolerance для сглаживания появления/исчезновения шапки;
  • Желательно задействовать offset, чтобы шапка не реагировала на мелкие флик-движения;
  • Иногда используют requestAnimationFrame вместо scroll для более плавного обновления классов на мобильных устройствах.

Кастомизация событий на touch

Headroom.js допускает переопределение обработчиков событий, чтобы адаптировать поведение под конкретное устройство:

var headroom = new Headroom(header, {
  onPin: function() { console.log("header pinned"); },
  onUnpin: function() { console.log("header unpinned"); },
  onUnfix: function() { console.log("header unfix"); },
  onTop: function() { console.log("scrolled to top"); }
});

// Использование кастомного события для touch
document.addEventListener('touchmove', function(e) {
  headroom.update(); // принудительное обновление состояния шапки
});

Это позволяет интегрировать Headroom.js с библиотеками, которые управляют свайпом, каруселями или другими touch-элементами, не вызывая конфликтов при обработке прокрутки.

Совместимость и ограничения

  • На устройствах с поддержкой только touch (touch-only) события scroll иногда срабатывают с задержкой, поэтому рекомендуется использовать гибридный подход: комбинировать scroll и touchmove;
  • При вертикальной прокрутке внутри элементов с overflow (div с прокруткой) необходимо следить за правильным вычислением позиции относительно документа, чтобы Headroom.js корректно определял направление движения;
  • На старых Android-устройствах и браузерах Safari пороговая чувствительность и инерция могут отличаться, что требует отдельного тестирования.

Рекомендации по производительности

На touch-устройствах прокрутка часто вызывает большое количество событий touchmove, что может приводить к тормозам при обработке DOM-классов. Для оптимизации:

  • Использовать requestAnimationFrame для обновления состояния шапки вместо прямого изменения классов при каждом событии;
  • Минимизировать количество изменений в DOM и CSS-анимаций;
  • Настроить tolerance и offset для уменьшения частоты срабатывания, сохраняя отзывчивость интерфейса.

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

Оглавление