Параметры конструктора

Библиотека Locomotive Scroll реализует кастомное скроллирование с плавной анимацией, поддержкой параллакса и триггеров при появлении элементов. Основу её работы составляет создание экземпляра класса LocomotiveScroll с передачей объекта настроек в конструктор. Рассмотрим подробно все доступные параметры и их влияние на поведение скролла.

el — контейнер скролла

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

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

Особенности:

  • Элемент должен существовать в DOM на момент инициализации.
  • Если элемент скрыт через display: none, скролл работать не будет.
  • Рекомендуется использовать блок, занимающий всю высоту окна, чтобы избежать непредвиденного поведения.

smooth — плавность скролла

Тип: boolean Значение по умолчанию: false

Определяет, будет ли прокрутка сглаженной с эффектом инерции. Если установлено true, библиотека скрывает нативный скролл и обрабатывает движение вручную с плавной анимацией.

smooth: true

Важные моменты:

  • Плавный скролл может вызвать задержку в срабатывании событий scroll у нативного окна.
  • Не рекомендуется использовать на мобильных устройствах с низкой производительностью без оптимизации.
  • Поддерживает опцию smartphone для включения плавного скролла на мобильных устройствах.

direction — направление скролла

Тип: 'vertical' | 'horizontal' Значение по умолчанию: 'vertical'

Позволяет задавать направление прокрутки. По умолчанию вертикальное, но для горизонтальных лендингов используется 'horizontal'.

direction: 'horizontal'

Примечания:

  • Для горизонтальной прокрутки необходимо корректно настроить ширину контейнера и внутренних элементов.
  • Параллакс и анимации работают в выбранном направлении.

smoothMobile — плавность на мобильных

Тип: boolean Значение по умолчанию: false

Включает сглаженную прокрутку на мобильных устройствах, когда smooth уже активирован. Используется совместно с smartphone: { smooth: true }.

lerp — коэффициент интерполяции

Тип: number (от 0 до 1) Значение по умолчанию: 0.1

Определяет скорость сглаживания скролла. Чем ближе к 1, тем быстрее элементы догоняют целевую позицию, чем меньше — тем более плавный и инерционный скролл.

lerp: 0.08

Советы:

  • Для плавного эффекта параллакса рекомендуется ставить значение около 0.08–0.12.
  • Для более отзывчивого интерфейса на высокопроизводительных устройствах можно увеличить до 0.15–0.2.

reloadOnContextChange — перезапуск при изменении контекста

Тип: boolean Значение по умолчанию: false

Если установлено true, Locomotive Scroll автоматически пересчитывает размеры и позиции при изменении DOM или при смене медиа-контекста. Полезно при динамическом контенте.

getDirection — отслеживание направления

Тип: boolean Значение по умолчанию: false

Позволяет получать текущее направление движения скролла (up, down, left, right) через событие scroll.

scroll.on('scroll', (obj) => {
  console.log(obj.direction); // up / down
});

getSpeed — отслеживание скорости

Тип: boolean Значение по умолчанию: false

Позволяет вычислять скорость прокрутки. Значение speed можно использовать для динамических эффектов, например, увеличения масштаба при быстром скролле.

scroll.on('scroll', (obj) => {
  console.log(obj.speed); // число, скорость прокрутки
});

class — класс активного элемента

Тип: string Значение по умолчанию: 'is-reveal'

Используется для автоматического добавления класса к элементам с атрибутом data-scroll при попадании в видимую область.

class: 'active-scroll'

Применение:

  • Анимации появления элементов при прокрутке.
  • Триггеры кастомных стилей через CSS.

offset — смещение появления

Тип: number или array Значение по умолчанию: 0

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

offset: 100

или

offset: [0, 50] // по вертикали и горизонтали

repeat — повторение анимации

Тип: boolean Значение по умолчанию: false

Если true, элементы с data-scroll будут повторно активироваться при повторном попадании в область видимости.

tablet и smartphone — адаптивные настройки

Оба параметра принимают объект с теми же ключами, что и основной конструктор, например:

smartphone: {
  smooth: false,
  direction: 'vertical'
},
tablet: {
  smooth: true,
  direction: 'vertical'
}

Особенности:

  • Позволяют отдельно настраивать поведение скролла на разных устройствах.
  • Если параметры не указаны, используются глобальные настройки.

resetNativeScroll — сброс нативного скролла

Тип: boolean Значение по умолчанию: true

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

Итоговое создание экземпляра

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

const scroll = new LocomotiveScroll({
  el: document.querySelector('#main-container'),
  smooth: true,
  direction: 'vertical',
  lerp: 0.1,
  getDirection: true,
  getSpeed: true,
  class: 'is-reveal',
  offset: [0, 100],
  repeat: false,
  smartphone: { smooth: false },
  tablet: { smooth: true }
});

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

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

Оглавление