Мониторинг ошибок в продакшене

Locomotive Scroll — это библиотека для создания плавной прокрутки и анимаций на основе скролла в JavaScript. Она обеспечивает виртуальную прокрутку с использованием transform вместо стандартного scrollTop, что позволяет добиться высокой производительности и плавности даже при сложных анимациях. Ключевым элементом является контейнер с атрибутом data-scroll-container, внутри которого расположены все скроллируемые элементы.

Инициализация и базовая настройка

import LocomotiveScroll from 'locomotive-scroll';

const scroll = new LocomotiveScroll({
  el: document.querySelector('[data-scroll-container]'),
  smooth: true,
  multiplier: 1,
  class: 'is-reveal',
  smartphone: { smooth: true },
  tablet: { smooth: true },
});
  • el — DOM-элемент контейнера.
  • smooth — включает плавную прокрутку.
  • multiplier — множитель скорости прокрутки.
  • class — CSS-класс для анимации появления элементов.
  • smartphone и tablet — настройки адаптивного поведения.

Обработка событий скролла

Locomotive Scroll предоставляет API для отслеживания позиции скролла и изменения состояния элементов на странице. Основные события:

  • scroll — вызывается при каждом обновлении прокрутки.
  • call — срабатывает при достижении определённого элемента с атрибутом data-scroll-call.
  • resize — при изменении размеров окна.

Пример подписки на событие:

scroll.on('scroll', (obj) => {
  console.log(obj.scroll.y); // текущая позиция по оси Y
});

Параллакс и анимации

Locomotive Scroll позволяет создавать параллакс-эффекты и анимации на основе прокрутки с помощью атрибутов data-scroll, data-scroll-speed и data-scroll-direction.

<div data-scroll data-scroll-speed="2">
  Параллакс-элемент
</div>
  • data-scroll-speed — скорость движения элемента относительно прокрутки.
  • data-scroll-direction — направление движения (horizontal или vertical).

Использование с GSAP

Для сложных анимаций библиотека отлично интегрируется с GSAP:

import { gsap } from 'gsap';

scroll.on('scroll', (obj) => {
  gsap.to('.box', {
    y: obj.scroll.y * 0.5,
    duration: 0.3,
    ease: 'power1.out'
  });
});

Методы управления

  • update() — обновляет размеры и позиции элементов, необходимо после динамического изменения DOM.
  • scrollTo(target, options) — плавный скролл к указанному элементу или позиции.
scroll.scrollTo('#section2', { offset: -50, duration: 1000 });
  • start() и stop() — управление прокруткой, например, при открытии модального окна.

Особенности работы в продакшене

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

    // Добавление нового блока
const newBlock = document.createElement('div');
newBlock.setAttribute('data-scroll', '');
document.querySelector('[data-scroll-container]').appendChild(newBlock);
scroll.update();

  2. Ошибки при отсутствии контейнера Если элемент с data-scroll-container не найден, библиотека выбросит ошибку. Нужно проверять существование перед инициализацией:

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

  3. Совместимость с серверным рендерингом Locomotive Scroll не работает в Node.js окружении. При SSR необходимо инициализировать библиотеку только на клиенте:

    if (typeof window !== 'undefined') {
  const scroll = new LocomotiveScroll({ el: document.querySelector('[data-scroll-container]'), smooth: true });
}

  4. Мониторинг и логирование ошибок Для продакшена рекомендуется оборачивать инициализацию и обработку событий в try...catch и использовать сторонние сервисы логирования:

    try {
  const scroll = new LocomotiveScroll({ el: container, smooth: true });
  scroll.on('scroll', (obj) => {
    // логика
  });
} catch (error) {
  console.error('Locomotive Scroll error:', error);
  // отправка в Sentry, LogRocket или другую систему мониторинга
}

  5. Отслеживание производительности Поскольку Locomotive Scroll использует transform и requestAnimationFrame, важно контролировать нагрузку на рендеринг. Для этого можно профилировать скролл с помощью DevTools и минимизировать тяжелые операции внутри событий scroll.

  6. Совместная работа с библиотеками анимации При одновременном использовании GSAP, ScrollTrigger и других скриптов важно использовать метод update() после динамических изменений и вызывать scroll.destroy() перед удалением контейнера, чтобы избежать ошибок:

    scroll.destroy();

Рекомендации по безопасной эксплуатации

  • Всегда проверять наличие DOM-элементов перед инициализацией.
  • Использовать try...catch для глобального контроля ошибок.
  • Вызывать update() после добавления/удаления элементов.
  • Минимизировать тяжелую логику внутри событий scroll.
  • Для мобильных устройств использовать настройки smartphone и tablet для плавной работы и предотвращения сбоев.
Оглавление