Синхронизация скролл-позиции

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

Получение текущей позиции скролла

Locomotive Scroll хранит текущее положение скролла в объекте scroll.instance.scroll.y. Этот параметр обновляется динамически при каждом скролле.

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

scroll.on('scroll', (instance) => {
  console.log('Текущая позиция Y:', instance.scroll.y);
});
  • el — элемент, который управляет скроллом (часто это body или контейнер с data-scroll-container).
  • smooth: true активирует плавный скролл.
  • Событие scroll вызывается при любом изменении положения, предоставляя объект instance с полной информацией о скролле.

Программное управление скроллом

Для синхронизации с анимациями или другими библиотеками иногда требуется программно установить позицию скролла:

scroll.scrollTo(500, {
  duration: 1000,
  easing: [0.25, 0.0, 0.35, 1.0]
});
  • scrollTo может принимать числовое значение, элемент DOM или селектор.
  • duration задает продолжительность анимации в миллисекундах.
  • easing определяет кривую ускорения для плавного эффекта.

События и их использование

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

  1. scroll — вызывается на каждом кадре скролла.
  2. call — триггерится при достижении элемента с data-scroll-call, позволяет запускать кастомные функции.
  3. resize — обновляет скролл при изменении размера окна.
scroll.on('call', (value, way, obj) => {
  console.log('Элемент достигнут:', value, way);
});
  • value — значение из атрибута data-scroll-call.
  • way — направление скролла (up или down).
  • obj — объект элемента, на котором сработало событие.

Интеграция с GSAP и другими библиотеками

Для сложных анимаций часто требуется связать скролл-позицию с таймлайнами GSAP:

gsap.registerPlugin(ScrollTrigger);

ScrollTrigger.scrollerProxy('#main-container', {
  scrollTop(value) {
    return arguments.length ? scroll.scrollTo(value, 0) : scroll.instance.scroll.y;
  },
  getBoundingClientRect() {
    return { top: 0, left: 0, width: window.innerWidth, height: window.innerHeight };
  }
});

scroll.on('scroll', ScrollTrigger.update);
  • scrollerProxy позволяет ScrollTrigger работать с кастомным скроллом Locomotive.
  • Метод scrollTop синхронизирует положение скролла между библиотеками.
  • ScrollTrigger.update гарантирует актуальность анимаций на каждом кадре.

Поддержка виртуального и горизонтального скролла

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

const scroll = new LocomotiveScroll({
  el: document.querySelector('#horizontal-container'),
  smooth: true,
  direction: 'horizontal'
});
  • Параметр direction: 'horizontal' меняет ось скролла.
  • Синхронизация с горизонтальными анимациями происходит по аналогии с вертикальным скроллом.

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

При синхронизации с анимациями важно избегать лишних пересчетов DOM:

  • Использовать requestAnimationFrame при обработке тяжелых скролл-событий.
  • Применять scroll.update() после изменений в DOM, чтобы Locomotive Scroll пересчитал размеры.
  • Ограничить количество элементов с data-scroll-call для уменьшения нагрузки на рендер.
scroll.on('scroll', () => {
  requestAnimationFrame(() => {
    // обновление анимаций
  });
});

Использование якорей и плавного перехода

Для синхронизации с навигацией применяют плавный скролл к якорям:

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', function(e) {
    e.preventDefault();
    const target = document.querySelector(this.getAttribute('href'));
    scroll.scrollTo(target);
  });
});
  • scrollTo автоматически учитывает текущую позицию и плавно анимирует переход.
  • Можно комбинировать с колбэками, чтобы запускать анимации при достижении секции.

Итоговые ключевые моменты

  • Текущая позиция скролла доступна через scroll.instance.scroll.y.
  • Программное управление скроллом возможно через scroll.scrollTo().
  • События scroll, call и resize позволяют синхронизировать внешние анимации.
  • Интеграция с GSAP требует scrollerProxy и вызова ScrollTrigger.update.
  • Горизонтальный скролл и виртуальные контейнеры синхронизируются аналогично вертикальному.
  • Оптимизация важна для плавного взаимодействия и минимизации нагрузки на браузер.

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

Оглавление