Настройка direction: 'horizontal'

Для использования горизонтальной прокрутки необходимо подключить библиотеку Locomotive Scroll и корректно инициализировать её с параметром direction: 'horizontal'. Установка осуществляется через npm:

npm install locomotive-scroll

Или подключением через CDN в HTML:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/locomotive-scroll@4.2.1/dist/locomotive-scroll.min.css">
<script src="https://cdn.jsdelivr.net/npm/locomotive-scroll@4.2.1/dist/locomotive-scroll.min.js"></script>

После подключения создаётся контейнер для скролла, который оборачивает весь контент, предназначенный для прокрутки:

<div data-scroll-container>
  <section data-scroll-section>
    <div class="horizontal-item">Элемент 1</div>
    <div class="horizontal-item">Элемент 2</div>
    <div class="horizontal-item">Элемент 3</div>
  </section>
</div>

Для горизонтального скролла ключевой момент — оформление контейнера и элементов с помощью CSS:

[data-scroll-container] {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: hidden;
  width: 100vw;
  height: 100vh;
}

[data-scroll-section] {
  display: flex;
  flex-direction: row;
}

.horizontal-item {
  flex: 0 0 auto;
  width: 100vw;
  height: 100vh;
}

Инициализация скролла с горизонтальным направлением

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

import LocomotiveScroll from 'locomotive-scroll';

const scroll = new LocomotiveScroll({
  el: document.querySelector('[data-scroll-container]'),
  smooth: true,
  direction: 'horizontal',
  multiplier: 1.0,
  inertia: 0.75,
  gestureDirection: 'both'
});

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

  • el — DOM-элемент контейнера скролла.
  • smooth: true — включает плавную прокрутку.
  • direction: 'horizontal' — задаёт горизонтальное направление.
  • multiplier — множитель скорости скролла, полезно для ускорения или замедления прокрутки.
  • inertia — определяет «торможение» после прокрутки (0–1).
  • gestureDirection: 'both' — позволяет управлять скроллом как мышью, так и сенсорными жестами.

Настройка секций и элементов для horizontal scroll

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

  • Каждый элемент должен иметь фиксированную ширину, соответствующую видимой области или её доле.
  • Контейнер должен иметь display: flex и flex-direction: row.
  • Для плавного параллакса и анимаций внутри горизонтального скролла применяются атрибуты data-scroll и data-scroll-speed.

Пример:

<div class="horizontal-item" data-scroll data-scroll-speed="2">
  Контент с ускорением
</div>
<div class="horizontal-item" data-scroll data-scroll-speed="-1">
  Контент с замедлением
</div>

Взаимодействие с событиями скролла

Locomotive Scroll предоставляет методы для отслеживания прокрутки:

scroll.on('scroll', (obj) => {
  console.log(obj.scroll.x, obj.scroll.y);
});

scroll.on('call', (func, way, obj) => {
  console.log(func, way, obj);
});
  • scroll.x — текущая горизонтальная позиция.
  • scroll.y — текущая вертикальная позиция (для hybrid-направлений).
  • call — срабатывает при достижении элементов с data-scroll-call.

Пример вызова при пересечении элемента:

<div data-scroll data-scroll-call="animateItem">Анимация</div>
scroll.on('call', (func, way, obj) => {
  if (func === 'animateItem' && way === 'enter') {
    obj.el.classList.add('active');
  }
});

Плавные анимации и параллакс

Для горизонтальной прокрутки особенно эффективны параллакс-эффекты. Примеры использования:

<div data-scroll data-scroll-speed="3" class="parallax-item">
  Передний план
</div>
<div data-scroll data-scroll-speed="0.5" class="parallax-item">
  Задний план
</div>

CSS для параллакса:

.parallax-item {
  position: relative;
  will-change: transform;
}

Поддержка responsive и touch-устройств

Для горизонтальной прокрутки важно учитывать адаптивность:

  • На мобильных устройствах может потребоваться overflow-x: scroll как fallback.
  • gestureDirection: 'both' позволяет корректно работать с тач-событиями.
  • Для динамического изменения размера контейнера необходимо вызывать метод scroll.update():
window.addEventListener('resize', () => {
  scroll.update();
});

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

Locomotive Scroll легко комбинируется с GSAP для анимаций:

import gsap from 'gsap';

scroll.on('scroll', (obj) => {
  gsap.to('.horizontal-item', {
    x: -obj.scroll.x,
    duration: 1,
    ease: 'power2.out'
  });
});

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

Эта конфигурация direction: 'horizontal' обеспечивает плавную, отзывчивую и гибкую горизонтальную прокрутку с поддержкой анимаций, параллакса и событий, полностью используя возможности Locomotive Scroll.

Оглавление