Отключение на мобильных устройствах

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

Определение мобильного устройства

Существует несколько способов определить, что пользователь просматривает страницу на мобильном устройстве:

  1. Через navigator.userAgent:
const isMobile = /Android|iPhone|iPad|iPod|Opera Mini|IEMobile|WPDesktop/i.test(navigator.userAgent);

Этот метод проверяет строку user agent на наличие мобильных устройств. Минус метода — возможность некорректного определения на некоторых новых устройствах.

  1. Через ширину экрана:
const isMobile = window.innerWidth < 768;

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

Инициализация с условием

Для корректной работы следует проверять устройство перед созданием экземпляра Locomotive Scroll:

import LocomotiveScroll from 'locomotive-scroll';

let scroll;

if (!isMobile) {
  scroll = new LocomotiveScroll({
    el: document.querySelector('[data-scroll-container]'),
    smooth: true,
    multiplier: 1.0,
    inertia: 0.75,
  });
}

Ключевой момент — экземпляр библиотеки создаётся только если устройство не мобильное. В противном случае ресурсы не расходуются, и страница остаётся полностью функциональной с нативным скроллом.

Динамическое включение и отключение при изменении размеров экрана

Если необходимо, чтобы скролл включался или отключался при изменении ширины окна, можно использовать обработчик resize:

let scroll;

function initScroll() {
  if (!isMobile && !scroll) {
    scroll = new LocomotiveScroll({
      el: document.querySelector('[data-scroll-container]'),
      smooth: true,
    });
  } else if (isMobile && scroll) {
    scroll.destroy();
    scroll = null;
  }
}

window.addEventListener('resize', () => {
  const isMobile = window.innerWidth < 768;
  initScroll();
});

initScroll();

Здесь важно:

  • Проверять существование экземпляра scroll, чтобы не создавать его повторно.
  • Вызывать метод destroy() для корректного удаления скролла и восстановления стандартного поведения страницы.

Удаление обработчиков и сброс стилей

При отключении Locomotive Scroll следует учитывать, что библиотека добавляет инлайн-стили и обработчики событий. Метод destroy() очищает большинство из них, но иногда полезно вручную сбросить стили контейнера:

if (scroll) {
  scroll.destroy();
  document.querySelector('[data-scroll-container]').style.transform = '';
  document.querySelector('[data-scroll-container]').style.willChange = '';
}

Это предотвращает оставшиеся эффекты transform и will-change, которые могут нарушать нормальный скролл на мобильных устройствах.

Использование data-scroll-disable-on-mobile

Начиная с версии 4.x, Locomotive Scroll поддерживает кастомные атрибуты для управления поведением на разных устройствах. Например:

<div data-scroll-container data-scroll-disable-on-mobile>
  ...
</div>

Библиотека автоматически игнорирует элементы с этим атрибутом на мобильных устройствах, если используется соответствующая конфигурация. Это упрощает управление отключением скролла без написания дополнительных проверок в JS.

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

  • Не использовать smooth: true на слабых устройствах. Это может вызвать рывки и подвисания.
  • Оптимизировать эффекты анимации (data-scroll-speed, data-scroll-delay) для плавности.
  • Ограничивать количество элементов с data-scroll-section и data-scroll на мобильных экранах.
  • Рассматривать нативный скролл для мобильных пользователей, так как он более предсказуем и энергоэффективен.

Итоговые подходы

  1. Простое отключение по ширине экрана — чаще всего достаточно для адаптивного дизайна.
  2. Динамическое включение/отключение при изменении размеров — важно для планшетов и переворота экрана.
  3. Использование встроенных атрибутов библиотеки — минимизирует код и ошибки.
  4. Ручная очистка стилей и обработчиков — предотвращает баги после destroy().

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

Оглавление