Полный список событий

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

Глобальные события прокрутки

  1. scroll Основное событие, которое срабатывает при каждой прокрутке. Параметры, передаваемые в обработчик:

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

scroll.on('scroll', (instance) => {
  console.log(instance.scroll); // {x, y} — текущие координаты прокрутки
});

    Ключевые моменты:

    • Срабатывает при каждом изменении положения страницы.
    • Позволяет получать актуальные координаты по осям X и Y.
    • Можно использовать для динамического изменения элементов на основе позиции.

  2. call Событие, которое активируется при достижении определенного элемента с атрибутом data-scroll-call. Использование:

    <div data-scroll-call="myElement" data-scroll-repeat></div>
    scroll.on('call', (func, way, obj) => {
  console.log(func, way, obj.el); 
  // func — имя, way — "enter" или "exit", obj.el — DOM-элемент
});

    Особенности:

    • way может быть "enter" (вошел в зону видимости) или "exit" (вышел из зоны видимости).
    • Атрибут data-scroll-repeat позволяет повторно срабатывать при повторном входе элемента.

  3. resize Срабатывает при изменении размеров окна браузера.

    scroll.on('resize', () => {
  console.log('Размер окна изменен');
});

    Применение:

    • Обновление анимаций или положения элементов после изменения размеров.
    • Синхронизация с другими библиотеками или плагинами, реагирующими на размеры.

События элементов

  1. enter / exit Специальные события, связанные с видимостью конкретного элемента на экране. Работают с атрибутом data-scroll-call. Пример:

    scroll.on('call', (func, way, obj) => {
  if(func === 'fadeIn' && way === 'enter') {
    obj.el.classList.add('visible');
  } else if (func === 'fadeIn' && way === 'exit') {
    obj.el.classList.remove('visible');
  }
});

  2. ticking Срабатывает только при изменении позиции скролла по оси Y. Оптимизирован для повышения производительности при интенсивных анимациях.

    scroll.on('scroll', ({ scroll }) => {
  if(scroll.y > 200) console.log('Прокручено более 200px');
});

    Отличие от обычного scroll:

    • Позволяет избежать лишних вызовов обработчика при небольших колебаниях.
    • Подходит для создания эффекта «ленивой» анимации элементов.

Системные события жизненного цикла

  1. destroy Срабатывает при удалении экземпляра скролла. Используется для очистки слушателей и ресурсов.

    scroll.on('destroy', () => {
  console.log('Scroll уничтожен');
});

  2. update Срабатывает при вызове метода update(), который пересчитывает позиции элементов и параметры прокрутки.

    scroll.update();
scroll.on('update', () => {
  console.log('Scroll обновлен');
});

  3. scrollTo Срабатывает после завершения анимации метода scrollTo().

    scroll.scrollTo('#section2', {
  offset: -50,
  duration: 800,
  easing: [0.25, 0.00, 0.35, 1.00]
}).then(() => console.log('Прокрутка завершена'));

Особенности работы с событиями

  • Все события привязаны к экземпляру скролла и не могут работать без него.
  • Обработчики можно удалять методом off(event, callback).
  • Атрибуты data-scroll-speed, data-scroll-delay, data-scroll-direction напрямую влияют на события и анимации элементов.
  • Использование data-scroll-repeat позволяет событиям повторно срабатывать при повторном пересечении зоны видимости элемента.

Рекомендации по оптимизации

  • Событие scroll может быть ресурсоемким на длинных страницах; предпочтительно использовать call или ticking для сложных анимаций.
  • Избегать тяжелой логики внутри обработчиков событий без дебаунсинга.
  • Для динамически добавляемых элементов необходимо вручную обновлять экземпляр методом update().

Хотите, я составлю подробную таблицу всех событий Locomotive Scroll с параметрами и примерами, чтобы она стала удобным справочником для учебника?

Оглавление