Логирование событий

Для начала работы с библиотекой Locomotive Scroll необходимо создать экземпляр класса LocomotiveScroll и указать контейнер, в котором будет происходить скроллирование. Основные параметры:

import LocomotiveScroll fr om 'locomotive-scroll';

const scroll = new LocomotiveScroll({
  el: document.querySelector('#js-scroll'),
  smooth: true,
  getDirection: true,
  getSpeed: true,
});
  • el — DOM-элемент, который будет прокручиваться.
  • smooth — включает плавную прокрутку.
  • getDirection — позволяет отслеживать направление прокрутки (up или down).
  • getSpeed — позволяет получать скорость скролла.

Эти параметры влияют на последующее логирование событий, так как без включения getDirection и getSpeed невозможно получить соответствующие данные.

Основные события

Locomotive Scroll предоставляет несколько ключевых событий для логирования:

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

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

scroll.on('scroll', (obj) => {
  console.log('Текущая позиция:', obj.scroll.y);
  console.log('Скорость скролла:', obj.speed);
  console.log('Направление:', obj.direction);
});

obj содержит ключевые свойства:

  • scroll.x и scroll.y — текущие координаты прокрутки по горизонтали и вертикали.
  • limit.x и limit.y — максимальные значения прокрутки.
  • direction — направление (up или down).
  • speed — скорость движения.

Логирование с фильтрацией

Для уменьшения количества выводов в консоль рекомендуется фильтровать события по скорости или позиции. Например:

scroll.on('scroll', ({ scroll, speed }) => {
  if (speed > 2) {
    console.log(`Высокая скорость: ${speed}`);
  }
});

Это позволяет отслеживать только значимые изменения, исключая мелкие флуктуации при медленном скролле.

Использование события call

Элементам можно назначать атрибут data-scroll-call="название_события", чтобы логировать их появление:

Обработка события:

scroll.on('call', (func, dir, el) => {
  console.log(`Элемент вызвал событие: ${func}`);
  console.log(`Направление прокрутки: ${dir}`);
  console.log(`Элемент:`, el);
});
  • func — значение атрибута data-scroll-call.
  • dir — направление скролла при активации события.
  • el — DOM-элемент, который вызвал событие.

Такой подход полезен для логирования появления элементов в зоне видимости и построения сложных анимаций.

Логирование событий scrollTo

Метод scroll.scrollTo() позволяет анимированно прокручивать страницу к конкретному элементу или позиции. Событие scrollTo срабатывает после завершения анимации:

scroll.scrollTo('#section-2', {
  offset: -50,
  duration: 1500,
  easing: [0.25, 0.0, 0.35, 1.0]
});

scroll.on('scrollTo', ({ lim it, position }) => {
  console.log(`Анимация прокрутки завершена на позиции ${position.y}`);
});
  • position — конечные координаты после анимации.
  • limit — максимальные значения прокрутки в контейнере.

Это позволяет логировать каждое программное перемещение по странице.

Пользовательская обёртка логирования

Для систематизации логов часто создают функцию-обёртку:

function logScrollEvent(type, data) {
  const timestamp = new Date().toISOString();
  console.log(`[${timestamp}] [${type}]`, data);
}

scroll.on('scroll', (obj) => logScrollEvent('scroll', obj));
scroll.on('call', (func, dir, el) => logScrollEvent('call', { func, dir, el }));
scroll.on('scrollTo', (data) => logScrollEvent('scrollTo', data));

Преимущества:

  • Единый формат логов для всех событий.
  • Возможность включать или отключать логирование через флаг.
  • Лёгкая интеграция с внешними системами аналитики.

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

Логирование событий прокрутки может замедлять работу страницы при большом количестве элементов. Для оптимизации:

  • Использовать дебаунсинг событий scroll:
let timer;
scroll.on('scroll', (obj) => {
  clearTimeout(timer);
  timer = setTimeout(() => {
    console.log('Позиция:', obj.scroll.y);
  }, 50);
});
  • Логировать только ключевые события (call и scrollTo), а не каждое движение.
  • При необходимости отправлять данные на сервер асинхронно, не блокируя основной поток.

Вывод ключевых метрик

Для аналитики удобно собирать несколько метрик:

  • Текущая позиция скролла (scroll.y).
  • Скорость движения (speed).
  • Направление прокрутки (direction).
  • События вызова элементов (call).
  • Завершение анимаций прокрутки (scrollTo).

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

Оглавление