Полный список опций

Для создания плавного скролла с библиотекой Locomotive Scroll используется конструктор new LocomotiveScroll(options), где options — это объект с настройками поведения и внешнего вида. Базовый пример:

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

Здесь el указывает на контейнер скролла, а smooth включает плавную анимацию.

Полный список опций

el (обязательный)

Тип: HTMLElement Элемент-контейнер, в котором происходит прокрутка. Обычно это div с контентом страницы.

name

Тип: string Позволяет задать имя экземпляра скролла. Используется для работы с несколькими экземплярами одновременно.

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

smooth

Тип: boolean Включает или отключает плавную прокрутку.

  • true — плавная прокрутка с использованием requestAnimationFrame и трансформаций.
  • false — стандартный нативный скролл браузера.

direction

Тип: 'vertical' | 'horizontal' Направление прокрутки. По умолчанию — 'vertical'. Используется для горизонтальных лендингов и слайдеров.

direction: 'horizontal'

gestureDirection

Тип: 'vertical' | 'horizontal' | 'both' Определяет направление, в котором пользователь может прокручивать контент с помощью тач-жестов на мобильных устройствах.

reloadOnContextChange

Тип: boolean Перезагружает скролл при изменении размеров или контекста документа. Особенно важно для адаптивных страниц.

lerp

Тип: number Коэффициент плавности анимации скролла. Диапазон: 0 — мгновенное следование за пользователем, 1 — очень медленное. Рекомендуемые значения: 0.1 – 0.15 для естественного эффекта.

smoothMobile

Тип: boolean Включает плавную прокрутку на мобильных устройствах. По умолчанию false, так как на слабых телефонах это может снизить производительность.

smoothTablet

Тип: boolean Аналогично smoothMobile, но для планшетов.

tablet и smartphone

Тип: object Настройки адаптивного поведения скролла. Пример:

tablet: {
  smooth: true,
  breakpoint: 1024
},
smartphone: {
  smooth: false,
  breakpoint: 768
}

breakpoint определяет ширину экрана, при которой включается данный набор настроек.

getSpeed

Тип: boolean Если true, экземпляр будет вычислять текущую скорость прокрутки (scroll.speed).

getDirection

Тип: boolean Если true, экземпляр будет отслеживать направление прокрутки (scroll.direction).

class

Тип: string CSS-класс, который добавляется к контейнеру скролла. По умолчанию — 'is-inview'.

scrollFromAnywhere

Тип: boolean Разрешает скролл не только по области контейнера, но и при прокрутке страницы в целом.

resetNativeScroll

Тип: boolean Включение сброса стандартного скролла браузера. Необходим при использовании smooth: true.

repeat

Тип: boolean Если true, элементы с анимациями могут повторно активироваться при повторном появлении в зоне видимости.

multiplier

Тип: number Множитель для скорости прокрутки. Полезно для создания ускоренной или замедленной прокрутки.

multiplier: 1.5 // на 50% быстрее

inertia

Тип: number Контролирует инерцию прокрутки при smooth: true. Более высокие значения создают эффект «плавного затухания».

touchMultiplier

Тип: number Регулирует чувствительность прокрутки при свайпе на сенсорных устройствах.

scrollbar

Тип: boolean | HTMLElement Добавляет кастомный скроллбар или принимает элемент, который будет использоваться как скроллбар. Пример:

scrollbar: document.querySelector('.custom-scrollbar')

resetByVisibility

Тип: boolean Если true, скролл автоматически сбрасывается для элементов, которые становятся видимыми после скрытия.

classToObserve

Тип: string CSS-класс для отслеживаемых элементов в контейнере скролла. Обычно используется с анимациями.

reloadOnResize

Тип: boolean Перезагружает скролл при изменении размера окна.

watchElements

Тип: boolean Активирует автоматическое отслеживание элементов с data-scroll и data-scroll-speed атрибутами.

Атрибуты для элементов внутри скролла

  • data-scroll: помечает элемент для отслеживания библиотекой.
  • data-scroll-speed: задаёт скорость прокрутки относительно основного скролла.
  • data-scroll-direction: 'vertical' | 'horizontal'. Определяет направление движения элемента.
  • data-scroll-delay: задаёт задержку анимации при движении элемента.
  • data-scroll-class: кастомный CSS-класс, который добавляется при попадании элемента в зону видимости.

Примеры комплексной инициализации

const scroll = new LocomotiveScroll({
  el: document.querySelector('#scroll-container'),
  smooth: true,
  direction: 'vertical',
  gestureDirection: 'both',
  reloadOnContextChange: true,
  lerp: 0.1,
  smoothMobile: true,
  tablet: { smooth: true, breakpoint: 1024 },
  smartphone: { smooth: false, breakpoint: 768 },
  getSpeed: true,
  getDirection: true,
  scrollbar: true,
  multiplier: 1.2,
  repeat: true,
  touchMultiplier: 2
});

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

Оглавление