Уничтожение экземпляра

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

Создание экземпляра обычно выглядит так:

import LocomotiveScroll from 'locomotive-scroll';

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

После инициализации объект scroll хранит ссылки на контейнер, обработчики событий и анимации элементов с атрибутами data-scroll. Для освобождения ресурсов и предотвращения утечек памяти используется метод destroy().

Метод destroy()

Метод destroy() выполняет следующие действия:

  1. Удаление слушателей событий – все события колесика мыши, тачскрина, клавиш и ресайза снимаются.
  2. Очистка DOM-свойств – убираются inline-стили, добавленные библиотекой, включая трансформации и позиции элементов.
  3. Остановка внутренних таймеров и рендеров – прекращается цикл анимации requestAnimationFrame.
  4. Удаление прокси-свойств – удаляются свойства и методы, созданные для отслеживания скролла и внутренних состояний.

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

scroll.destroy();

После вызова destroy() экземпляр больше не работает и повторный доступ к методам, таким как scroll.scrollTo() или scroll.update(), приведёт к ошибкам.

Практические сценарии уничтожения

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

scroll.destroy();
scroll = new LocomotiveScroll({
  el: document.querySelector('[data-scroll-container]'),
  smooth: true,
});

2. Динамическая подгрузка контента Если на странице появляется новый блок с data-scroll-section, рекомендуется вызвать destroy() и создать экземпляр заново, либо использовать метод update() для пересчета размеров.

3. Очистка ресурсов при удалении элементов При удалении всего скролл-контейнера из DOM необходимо вызвать destroy(), чтобы избежать ошибок при обращении к несуществующим элементам.

Отличие destroy() и update()

  • destroy() полностью удаляет экземпляр и освобождает память.
  • update() пересчитывает позиции и размеры элементов без удаления слушателей и методов.

Использование update() удобно при изменении размеров или динамическом контенте, а destroy() — при полном удалении или замене скролла.

Советы по безопасному уничтожению

  • Всегда хранить ссылку на экземпляр: только через переменную можно вызвать destroy().
  • Не вызывать методы после destroy: доступ к scroll.scrollTo() или scroll.update() приведет к ошибкам.
  • Очищать DOM-элементы после destroy: если контейнер удаляется, сначала вызвать destroy(), потом removeChild или аналогичный метод.
  • Использовать условные проверки:
if (scroll) {
  scroll.destroy();
  scroll = null;
}

Это предотвращает повторный вызов destroy() на уже уничтоженном экземпляре.

Связь с производительностью

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

  • Замедление интерфейса
  • Повышенную нагрузку на GPU
  • Ошибки при обработке событий

Правильное использование destroy() обеспечивает чистый и безопасный цикл жизни скролла.

Заключение по методам

Основной метод для удаления экземпляра — это destroy(). Его корректное применение гарантирует:

  • Отсутствие конфликтов при повторной инициализации
  • Очистку inline-стилей и событий
  • Высвобождение памяти и ресурсов браузера

При сочетании с update() обеспечивается гибкое управление жизненным циклом скролла на динамических страницах.

Оглавление