start() и stop()

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

Метод start()

Метод start() активирует скролл, и после его вызова Locomotive Scroll начинает отслеживать позицию страницы, обрабатывать события скролла и применять эффекты.

Синтаксис:

scroll.start();

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

  • Возобновление скролла после stop(). Если скролл был ранее остановлен методом stop(), вызов start() восстановит нормальное поведение.
  • Инициализация наблюдателей. Все внутренние слушатели событий, включая прокрутку, обновление позиций элементов и триггеры для анимаций, вновь становятся активными.
  • Совместимость с update(). Если структура DOM была изменена после остановки скролла, рекомендуется вызвать scroll.update() до start() для корректного расчета позиции элементов.

Пример использования:

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

// Остановка скролла на время загрузки модальных окон
scroll.stop();

// Через 3 секунды включаем скролл обратно
setTimeout(() => {
  scroll.update(); // обновляем позиции элементов
  scroll.start();  // возобновляем прокрутку
}, 3000);

Метод stop()

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

Синтаксис:

scroll.stop();

Характерные особенности:

  • Остановка прокрутки. Скролл перестаёт реагировать на колесо мыши, тач-события и клавиатурные события, связанные с прокруткой.
  • Сохранение состояния. Текущая позиция страницы сохраняется, что позволяет после возобновления скролла (start()) продолжить с того же места.
  • Снижение нагрузки на рендеринг. Отключение скролла временно убирает обработку событий анимаций, что может быть полезно при интенсивных DOM-операциях.

Пример использования:

// Остановка скролла при открытии меню
document.querySelector('.menu-button').addEventListener('click', () => {
  scroll.stop();
});

// Возобновление после закрытия меню
document.querySelector('.close-menu').addEventListener('click', () => {
  scroll.start();
});

Взаимодействие с другими методами

Методы start() и stop() тесно связаны с другими возможностями Locomotive Scroll:

  • update() — после изменения контента или размеров элементов рекомендуется обновить внутренние позиции до вызова start().
  • scrollTo() — даже если скролл остановлен, вызов scroll.scrollTo() возможен, однако плавная анимация может быть недоступна.
  • События (scroll и call) — при остановке скролла события перестают генерироваться до повторного вызова start().

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

  1. Использовать для модальных окон и всплывающих элементов — остановка скролла предотвращает случайное прокручивание контента.
  2. Обновлять позиции перед start() — особенно если DOM был динамически изменён, чтобы элементы отображались корректно.
  3. Не вызывать часто — частые вызовы stop() и start() могут приводить к дрожанию анимаций или снижению производительности.

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

Оглавление