Принцип работы виртуального скролла

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

Виртуальный контейнер и скроллбар

Locomotive Scroll создаёт внутренний контейнер, который управляет положением содержимого страницы через CSS-свойство transform: translate3d. Вместо того чтобы полагаться на нативный скролл браузера, библиотека отслеживает движение контейнера виртуально, вычисляя текущую позицию скролла и обновляя её в реальном времени:

[data-scroll-container] {
  will-change: transform;
  transform: translate3d(0, 0, 0);
}
  • data-scroll-container — элемент, содержащий весь скроллируемый контент.
  • will-change: transform позволяет браузеру заранее оптимизировать отрисовку, что улучшает производительность.

Благодаря этому подходу появляется возможность реализовать плавную прокрутку с эффектом инерции, даже если стандартный скролл страницы отключён.

Вычисление позиции скролла

Locomotive Scroll использует внутренние переменные, которые хранят текущее и целевое положение скролла. Основная логика сводится к следующему:

  1. Текущее положение (current) — фактическая позиция контейнера на экране.
  2. Целевая позиция (target) — позиция, которую задаёт пользователь с помощью колесика мыши, тачскрина или свайпа.
  3. Инерция (lerp) — плавное приближение текущей позиции к целевой:
current += (target - current) * ease;
  • ease — коэффициент сглаживания (обычно 0.1–0.15).
  • Такой подход обеспечивает ощущение естественного замедления и ускорения.

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

Locomotive Scroll перехватывает несколько типов взаимодействий:

  • Wheel — движение колесика мыши.
  • Touch — свайпы на мобильных устройствах.
  • Keyboard — клавиши PageUp/PageDown, стрелки.
  • Programmatic — скролл через JS API (scrollTo).

Каждое событие не изменяет стандартный скролл браузера, а лишь обновляет target. После этого библиотека запускает внутренний цикл анимации, который вычисляет новое положение current и обновляет transform контейнера.

Параллакс и элементы с эффектом

Одним из ключевых преимуществ виртуального скролла является возможность привязывать элементы к прокрутке:

  • data-scroll — активирует отслеживание позиции элемента.
  • data-scroll-speed — задаёт скорость движения относительно основной прокрутки.
  • data-scroll-direction — направление анимации (вертикальное или горизонтальное).

Пример параллакс-эффекта:

<div data-scroll data-scroll-speed="2">
  Плавающий элемент
</div>
  • Значение 2 означает, что элемент будет двигаться в два раза быстрее базового скролла.
  • Легко комбинируется с transform и opacity для создания сложных анимаций.

Синхронизация с событиями страницы

Locomotive Scroll позволяет подписываться на события жизненного цикла скролла:

  • scroll — вызывается при каждом обновлении положения.
  • call — триггер для кастомных функций при достижении определённых элементов.
  • enter / leave — фиксируют момент появления или исчезновения элемента из видимой области.

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

scroll.on('call', (func, way, obj) => {
  if(func === 'animate') {
    obj.el.classList.add('active');
  }
});
  • way указывает направление (up/down).
  • obj.el — целевой элемент.

Производительность и оптимизация

Основная нагрузка ложится на GPU, поскольку трансформация элементов через translate3d использует аппаратное ускорение. Для оптимизации рекомендуется:

  • Использовать will-change: transform на всех часто анимируемых элементах.
  • Минимизировать количество одновременно активных анимаций.
  • Не применять эффекты к элементам с тяжелым рендером (например, большое количество теней или градиентов).
  • Включать smooth только на контейнерах, где это реально необходимо.

Горизонтальный скролл

Locomotive Scroll поддерживает и горизонтальное направление:

const scroll = new LocomotiveScroll({
  el: document.querySelector('[data-scroll-container]'),
  smooth: true,
  direction: 'horizontal'
});
  • В этом режиме все принципы остаются теми же, но вычисления смещения применяются к оси x.
  • Элементы с data-scroll-speed будут смещаться горизонтально.

Итоговый механизм

Виртуальный скролл Locomotive Scroll работает по циклу:

  1. Пользователь инициирует движение (wheel, touch, keyboard).
  2. Обновляется target позиции скролла.
  3. В каждом кадре анимации вычисляется current через интерполяцию.
  4. Контейнер с контентом смещается с помощью transform: translate3d.
  5. Запускаются события и анимации привязанных элементов.

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

Оглавление