Отмена анимации скролла

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

Деактивация прокрутки через метод stop()

Для полного отключения анимации скролла используется метод stop(). Он останавливает обработку всех внутренних анимаций и событий, связанных с текущим экземпляром Locomotive Scroll:

const scroll = new LocomotiveScroll({
  el: document.querySelector('#scroll-container'),
  smooth: true,
});

scroll.stop();

После вызова stop() все эффекты «плавного скролла» прекращаются, но элементы DOM остаются на текущих позициях. Важно понимать, что это временная мера, и скролл можно возобновить методом start().

scroll.start();

Полная отмена анимации через destroy()

Если требуется полностью удалить все следы Locomotive Scroll с страницы — освободить слушатели событий и вернуть стандартный нативный скролл — используется метод destroy().

scroll.destroy();

Эта операция:

  • Убирает обработчики scroll и resize.
  • Сбрасывает все примененные трансформации CSS (transform и translate3d) для элементов.
  • Очищает внутренние кэши и состояния библиотеки.

Метод destroy() полезен при динамическом изменении контента или при переходе между страницами SPA.

Управление анимациями через отключение конкретных триггеров

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

document.querySelectorAll('[data-scroll]').forEach(el => {
  el.removeAttribute('data-scroll');
});

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

Прерывание событий при отмене скролла

При отключении анимации важно корректно обработать связанные события. Locomotive Scroll генерирует события scroll, call, resize. Если скролл отключен через stop() или destroy(), следует удалить подписку на эти события, иначе возможны ошибки или лишние вызовы функций:

scroll.off('scroll');
scroll.off('call');
scroll.off('resize');

Использование флага smooth для условного отключения

При инициализации можно задать параметр smooth: false для полной деактивации плавной прокрутки:

const scroll = new LocomotiveScroll({
  el: document.querySelector('#scroll-container'),
  smooth: window.innerWidth > 1024, // отключение на мобильных
});

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

Сброс позиции скролла

При отключении анимации может потребоваться корректировка позиции страницы, чтобы пользователь не увидел резких скачков. Для этого используется метод scrollTo() без анимации:

scroll.scrollTo(0, { offset: 0, duration: 0, disableLerp: true });
  • offset задаёт смещение от целевого элемента.
  • duration: 0 мгновенно перемещает страницу.
  • disableLerp: true отключает плавное интерполирование позиции.

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

При интеграции Locomotive Scroll с анимационными библиотеками типа GSAP или Barba.js отключение скролла требует синхронизации:

  • Вызов stop() перед анимацией страницы предотвращает конфликт трансформаций.
  • После завершения анимации следует вызвать start() или update() для восстановления корректного поведения.
scroll.stop();
// Запуск анимации GSAP
gsap.to('.box', { x: 100, duration: 1 });
scroll.start();

Резюме управления отключением

Ключевые методы для контроля анимации скролла:

Метод Действие
stop() Временно приостанавливает обработку анимаций и событий скролла
start() Возобновляет работу после stop()
destroy() Полностью удаляет экземпляр, возвращает нативный скролл
scrollTo() Позволяет корректировать позицию после остановки скролла
off(event) Отключает обработчики событий при деактивации

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

Оглавление