Callback-функции после прокрутки

Locomotive Scroll предоставляет мощный инструмент для создания плавной и кастомной прокрутки страниц с возможностью привязки событий к скроллу. Одним из ключевых механизмов является использование callback-функций, которые срабатывают при определённых событиях прокрутки. Это позволяет динамически изменять поведение элементов страницы в зависимости от позиции скролла, скорости прокрутки или других параметров.

Инициализация Locomotive Scroll

Прежде чем использовать callback-функции, необходимо корректно инициализировать экземпляр Locomotive Scroll:

import LocomotiveScroll from 'locomotive-scroll';

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

Ключевые параметры:

  • el — контейнер, который будет прокручиваться.
  • smooth — включает плавную прокрутку.
  • multiplier — множитель скорости прокрутки.
  • lerp — коэффициент сглаживания движения.

Событие scroll

Основной callback для отслеживания текущей позиции прокрутки — это событие scroll. Оно предоставляет объект с информацией о позиции контейнера, скорости прокрутки и направлении.

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

Параметры объекта instance:

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

События появления и выхода элементов (call)

Locomotive Scroll позволяет назначать callback на элементы при их появлении в зоне видимости. Для этого используется data-атрибут data-scroll-call и метод on('call'):

HTML:

<div data-scroll data-scroll-call="fadeIn">Контент для анимации</div>

Jav * aScript:

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

Параметры callback call:

  • func — имя callback, указанное в data-scroll-call.

  • way — направление появления элемента (enter или leave).

  • obj — объект с данными элемента:

    • el — DOM-элемент.
    • direction — направление движения при появлении.
    • progress — прогресс видимости элемента (0–1).

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

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

Метод scroll.scrollTo() позволяет прокручивать страницу к определённому элементу или координате с возможностью передачи callback-функции, выполняемой после завершения прокрутки.

scroll.scrollTo('#section2', {
  offset: -50,
  duration: 1000,
  easing: [0.25, 0.0, 0.35, 1.0],
  disableLerp: false
}).then(() => {
  console.log('Прокрутка завершена, можно запускать анимацию.');
});

Опции метода scrollTo:

  • offset — смещение относительно верхнего края окна.
  • duration — продолжительность анимации в миллисекундах.
  • easing — массив для кастомной кривой ускорения.
  • disableLerp — отключает сглаживание прокрутки.

Callback через then() позволяет синхронизировать действия, например запуск анимации или загрузку данных после завершения скролла.

Контроль скорости и прогресса прокрутки

Callback-функции можно использовать для контроля динамических эффектов на странице:

scroll.on('scroll', (instance) => {
  const header = document.querySelector('header');
  const opacity = 1 - instance.scroll.y / 300;
  header.style.opacity = Math.max(0, opacity);
});

В этом примере прозрачность заголовка плавно уменьшается по мере прокрутки страницы вниз. Такую логику можно расширять до параллакс-эффектов, динамического изменения цветов или масштабирования элементов.

Удаление callback

Чтобы избежать утечек памяти и избыточных событий, callback-функции можно удалять:

function onScrollHandler(instance) {
  console.log(instance.scroll.y);
}

scroll.on('scroll', onScrollHandler);

// Удаление callback
scroll.off('scroll', onScrollHandler);

Метод off позволяет отключить любое событие, аналогично on, но без сохранения ссылки на обработчик лишнее потребление ресурсов исключается.

Практические советы

  • Для анимаций лучше использовать requestAnimationFrame внутри callback, чтобы оптимизировать производительность.
  • Callback-функции должны быть лёгкими и не блокировать основной поток браузера.
  • При работе с большим количеством элементов использовать data-scroll-call вместо постоянной проверки позиций через scroll для снижения нагрузки.
  • В сочетании с CSS-переменными callback позволяет управлять анимациями на уровне стилей без прямого вмешательства в DOM.

Итоговая схема работы callback в Locomotive Scroll

  1. Инициализация скролл-контейнера.
  2. Назначение глобального события scroll для отслеживания позиции.
  3. Использование data-scroll-call и события call для элементов при появлении/исчезновении.
  4. Применение метода scrollTo с then() для синхронизации действий после прокрутки.
  5. Оптимизация производительности через off, requestAnimationFrame и минимизацию операций внутри callback.
Оглавление