direction

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

Настройка направления прокрутки

Направление прокрутки задаётся через опцию direction при инициализации экземпляра Locomotive Scroll:

const scroll = new LocomotiveScroll({
  el: document.querySelector('[data-scroll-container]'),
  smooth: true,
  direction: 'vertical' // или 'horizontal'
});
  • vertical – стандартная вертикальная прокрутка страницы.
  • horizontal – прокрутка по горизонтали, когда контент движется слева направо или справа налево.

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

Вертикальная прокрутка

Вертикальная прокрутка является стандартной конфигурацией и идеально подходит для большинства сайтов. Она поддерживает плавность, инерцию и эффект параллакса для элементов с атрибутами data-scroll и data-scroll-speed. Например:

<div data-scroll data-scroll-speed="2">
  Этот блок будет прокручиваться быстрее основного контента.
</div>
  • data-scroll-speed – скорость движения элемента относительно основной прокрутки. Положительное значение ускоряет элемент, отрицательное создаёт эффект обратного движения.

Горизонтальная прокрутка

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

  1. Контейнер должен иметь ширину, превышающую ширину окна браузера.
  2. Все дочерние элементы располагаются в линию через display: flex или inline-block.
  3. Устанавливается направление direction: 'horizontal'.

Пример структуры:

<div data-scroll-container style="display: flex; width: 300vw;">
  <section data-scroll>Секция 1</section>
  <section data-scroll>Секция 2</section>
  <section data-scroll>Секция 3</section>
</div>

При горизонтальной прокрутке также можно применять data-scroll-speed, чтобы элементы смещались с разной скоростью, создавая параллакс-эффект.

Адаптивное изменение направления

В некоторых проектах требуется менять направление прокрутки в зависимости от устройства или ширины экрана. Это можно реализовать через условную инициализацию:

const isMobile = window.innerWidth < 768;

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

Такой подход позволяет, например, на мобильных устройствах использовать вертикальную прокрутку для удобства, а на десктопе — горизонтальную для визуально эффектного представления контента.

Влияние направления на события

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

  • scroll.scroll.instance.scroll.y — вертикальная позиция прокрутки.
  • scroll.scroll.instance.scroll.x — горизонтальная позиция прокрутки.

В обработчиках событий необходимо учитывать текущее направление:

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

Советы по оптимизации

  1. Для горизонтальной прокрутки рекомендуется минимизировать количество крупных изображений, чтобы избежать просадки FPS.
  2. Атрибут data-scroll-speed следует использовать умеренно: слишком большое значение может привести к резким рывкам.
  3. При комбинировании вертикальной и горизонтальной прокрутки на разных блоках необходимо корректно управлять размерами контейнеров и overflow, чтобы не возникали баги с прокруткой.

Интеграция с другими эффектами

Направление прокрутки влияет на работу параллакса, скейлинга и анимаций:

<div data-scroll data-scroll-speed="1.5" data-scroll-direction="horizontal">
  Этот блок движется по горизонтали быстрее основного контента.
</div>

При этом можно комбинировать data-scroll-direction с основным direction, создавая эффект смещения элементов независимо от глобального направления прокрутки.

Заключение по direction

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

Оглавление