Комбинация вертикального и горизонтального

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

Для вертикальной прокрутки достаточно определить основной контейнер с атрибутом data-scroll-container и инициализировать скролл:

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

Горизонтальная прокрутка реализуется аналогично, но с параметром direction: 'horizontal':

const horizontalScroll = new LocomotiveScroll({
  el: document.querySelector('.horizontal-container'),
  smooth: true,
  direction: 'horizontal'
});

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

Структура DOM для комбинированного скролла

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

<div data-scroll-container>
  <section data-scroll-section>
    <div class="vertical-content" data-scroll data-scroll-speed="1">
      Вертикальный контент
    </div>
    <div class="horizontal-wrapper">
      <div class="horizontal-content" data-scroll data-scroll-direction="horizontal" data-scroll-speed="2">
        Горизонтальный контент
      </div>
    </div>
  </section>
</div>

data-scroll-section позволяет сегментировать страницу на независимые секции для более точного контроля.
data-scroll-speed регулирует скорость движения элементов относительно скролла.
data-scroll-direction="horizontal" указывает на горизонтальное движение конкретного блока.

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

Настройка событий и колбэков

Locomotive Scroll позволяет реагировать на события прокрутки с помощью слушателей:

scroll.on('scroll', (instance) => {
  console.log('Позиция скролла:', instance.scroll.y);
});

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

horizontalScroll.on('scroll', (instance) => {
  console.log('Позиция горизонтального скролла:', instance.scroll.x);
});

Дополнительно можно использовать локальные триггеры анимации через data-scroll и data-scroll-target для запуска анимаций при пересечении элементов:

<div data-scroll data-scroll-class="is-inview" data-scroll-repeat>
  Элемент активируется при появлении в зоне видимости
</div>

data-scroll-class — CSS-класс, который добавляется при попадании элемента в область видимости.
data-scroll-repeat — позволяет повторять активацию при повторном пересечении.

Контроль скорости и плавности

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

const scroll = new LocomotiveScroll({
  el: document.querySelector('[data-scroll-container]'),
  smooth: true,
  lerp: 0.1, // вертикальная прокрутка
});

const horizontalScroll = new LocomotiveScroll({
  el: document.querySelector('.horizontal-wrapper'),
  smooth: true,
  direction: 'horizontal',
  lerp: 0.2 // горизонтальная прокрутка
});

Особенность: при комбинированной прокрутке скорость горизонтальных блоков может быть скорректирована через data-scroll-speed, что создаёт эффект параллакса.

Решение проблем с размерами и overflow

Основная сложность комбинированного скролла — корректная работа с размерами блоков. Горизонтальные секции должны иметь:

фиксированную ширину, равную суммарной ширине всех дочерних элементов;
overflow скрыт (overflow: hidden) на родителе, чтобы предотвратить сдвиги контента;
внутренние элементы с display: flex для равномерного выравнивания.

.horizontal-wrapper {
  width: 100%;
  overflow: hidden;
}

.horizontal-content {
  display: flex;
  width: 200%; /* суммарная ширина всех горизонтальных элементов */
}

Если размеры заданы некорректно, Locomotive Scroll перестанет учитывать горизонтальный блок, и элементы могут «вырываться» из родителя при прокрутке.

Интеграция анимаций и сторонних библиотек

Комбинация вертикального и горизонтального скролла открывает возможности для параллакс-эффектов и сложных анимаций. Совместимость с библиотеками типа GSAP обеспечивается через методы scroll.scrollTo() и колбэки scroll.on('scroll', ...):

gsap.to('.animate-element', {
  x: 500,
  scrollTrigger: {
    scroller: '[data-scroll-container]',
    start: 'top center',
    end: 'bottom top',
    scrub: true
  }
});

scroller указывает на контейнер Locomotive Scroll.
scrub: true синхронизирует анимацию с прокруткой.

Горизонтальные элементы могут анимироваться аналогично, но с использованием координаты x вместо y, создавая сложные визуальные сцены.