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

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

Детекция устройства

Для условного отключения скролла необходимо определить тип устройства. Наиболее надёжный способ — проверка ширины окна или использование пользовательских агентов. Пример:

const isMobile = /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);

if (isMobile) {
  // отключаем Locomotive Scroll
} else {
  // инициализация Locomotive Scroll для десктопа
}

Вместо проверки userAgent можно использовать медиазапросы через window.matchMedia:

const isMobile = window.matchMedia("(max-width: 768px)").matches;

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

Отключение скролла через опцию reloadOnContextChange

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

import LocomotiveScroll from 'locomotive-scroll';

let scrollInstance;

if (!isMobile) {
  scrollInstance = new LocomotiveScroll({
    el: document.querySelector('#js-scroll'),
    smooth: true,
    multiplier: 1.0,
    class: 'is-reveal'
  });
}

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

if (scrollInstance) {
  scrollInstance.destroy();
}

Метод destroy удаляет все обработчики событий и восстанавливает стандартный нативный скролл, предотвращая конфликт с другими элементами страницы.

Условное включение анимаций

Locomotive Scroll тесно интегрируется с анимациями через атрибуты data-scroll и data-scroll-speed. При отключении скролла на мобильных устройствах важно предусмотреть fallback-анимации или их полное скрытие:

const scrollElements = document.querySelectorAll('[data-scroll]');

if (isMobile) {
  scrollElements.forEach(el => {
    el.removeAttribute('data-scroll');
    el.removeAttribute('data-scroll-speed');
  });
}

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

Обработка изменения размеров окна

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

window.addEventListener('resize', () => {
  const shouldUseScroll = window.innerWidth > 768;

  if (shouldUseScroll && !scrollInstance) {
    scrollInstance = new LocomotiveScroll({
      el: document.querySelector('#js-scroll'),
      smooth: true
    });
  } else if (!shouldUseScroll && scrollInstance) {
    scrollInstance.destroy();
    scrollInstance = null;
  }
});

Такой подход обеспечивает адаптивность и предотвращает ошибки при смене устройства без перезагрузки страницы.

Полезные методы и опции

  • destroy() — отключает скролл полностью, восстанавливая нативный.
  • update() — обновляет позицию и размеры элементов после изменений DOM.
  • scrollTo(target, options) — позволяет перемещать скролл программно; при отключении скролла вызовы следует игнорировать.
  • reloadOnContextChange: true — обновляет скролл при изменении размеров элементов или медиазапросов.

Практические рекомендации

  1. Использовать медиазапросы или проверку userAgent для определения необходимости отключения.
  2. Деактивировать все атрибуты data-scroll на мобильных устройствах, чтобы предотвратить конфликт с нативным скроллом.
  3. При динамическом изменении размеров окна — пересоздавать или уничтожать экземпляр Locomotive Scroll.
  4. Проверять производительность: на слабых устройствах плавный скролл может снижать отзывчивость интерфейса.
  5. В качестве альтернативы можно оставить smooth: false, что включит нативный скролл, но сохранит некоторые возможности библиотеки.

Такой подход обеспечивает полное и безопасное отключение Locomotive Scroll на разных устройствах без потери стабильности сайта и пользовательского опыта.

Оглавление