Полный список параметров

Для создания плавной прокрутки с помощью библиотеки Locomotive Scroll используется объект LocomotiveScroll. Инициализация происходит через конструктор с передачей конфигурационного объекта:

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

Обязательный параметр:

  • el — DOM-элемент, который служит контейнером для прокрутки. Обычно используется селектор [data-scroll-container].

Основные параметры

  • smooth (Boolean | Object) — включает плавную прокрутку. Значение true активирует плавную вертикальную прокрутку. Можно передать объект для расширенной настройки:
smooth: {
  smartphone: false,
  tablet: true
}

  • direction (String) — направление прокрутки: 'vertical' или 'horizontal'.

  • gestureDirection (String) — направление прокрутки при сенсорных устройствах: 'both', 'vertical', 'horizontal'.

  • lerp (Number) — коэффициент сглаживания анимации. Значение от 0 до 1. Чем ближе к 1, тем менее заметно замедление при прокрутке.

  • reloadOnContextChange (Boolean) — перезапуск скрипта при изменении контекста (например, при ресайзе).

Настройки для устройств

Locomotive Scroll позволяет задавать индивидуальные параметры для разных устройств:

smooth: true,
smartphone: {
  smooth: false,
  breakpoint: 768
},
tablet: {
  smooth: true,
  breakpoint: 1024
}
  • breakpoint — максимальная ширина экрана для применения настроек.
  • smooth — включает или отключает плавную прокрутку для устройства.

Параметры прокрутки

  • inertia (Number) — альтернатива lerp. Определяет плавность движения и инерцию.

  • class (String) — класс, добавляемый к элементу при активации Locomotive Scroll.

  • scrollingClass (String) — класс, добавляемый во время прокрутки.

  • draggingClass (String) — класс для состояния перетаскивания на мобильных устройствах.

  • reloadOnContextChange (Boolean) — перезапуск библиотеки при изменении контекста, полезно при динамическом изменении DOM.

Параметры событий

  • offset (Number | Array) — смещение для триггеров событий call и scroll. Можно задать как число пикселей или массив [topOffset, bottomOffset].

  • repeat (Boolean) — указывает, следует ли повторно активировать события для элементов, вышедших и снова вошедших в зону видимости.

  • resetNativeScroll (Boolean) — сброс стандартного скролла браузера при активации Locomotive Scroll.

  • getDirection (Boolean) — отслеживание направления прокрутки (up или down).

  • getSpeed (Boolean) — получение скорости прокрутки в реальном времени.

Параметры для горизонтальной прокрутки

При использовании горизонтальной прокрутки параметры direction: 'horizontal' и gestureDirection: 'both' управляют поведением.

  • horizontal (Boolean) — включает горизонтальную прокрутку.
  • scrollbar (Boolean) — отображение кастомного скроллбара.
scrollbar: true
  • smoothMobile (Boolean) — плавная прокрутка на мобильных устройствах, влияет на горизонтальные свайпы.

Callbacks и события

Locomotive Scroll поддерживает несколько видов событий:

  • scroll — вызывается при каждом изменении позиции.
  • call — триггер для кастомных функций на элементах с data-scroll-call.
  • enter / leave — событие входа или выхода элемента из зоны видимости.

Пример использования:

scroll.on('call', (func, way, obj) => {
  console.log(func, way, obj);
});
  • func — имя функции, указанное в data-scroll-call.
  • way — 'enter' или 'leave'.
  • obj — объект с информацией об элементе и его позиции.

Продвинутые параметры

  • multiplier (Number) — коэффициент увеличения скорости прокрутки.

  • resetNativeScroll (Boolean) — отключение нативного скролла браузера для предотвращения конфликтов.

  • class, scrollingClass, draggingClass — позволяют гибко стилизовать элементы при скролле и взаимодействии пользователя.

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

  • reloadOnContextChange необходим при динамических интерфейсах с подгрузкой контента, чтобы библиотека пересчитывала позиции элементов.

Итоговая структура конфигурации

const scroll = new LocomotiveScroll({
  el: document.querySelector('[data-scroll-container]'),
  smooth: true,
  direction: 'vertical',
  gestureDirection: 'both',
  lerp: 0.1,
  multiplier: 1,
  class: 'is-inview',
  scrollingClass: 'is-scrolling',
  draggingClass: 'is-dragging',
  offset: [0, 0],
  repeat: false,
  getDirection: true,
  getSpeed: true,
  smartphone: { smooth: false, breakpoint: 768 },
  tablet: { smooth: true, breakpoint: 1024 },
  reloadOnContextChange: true
});

Эта конфигурация охватывает полный набор параметров, обеспечивая максимальный контроль над поведением прокрутки и взаимодействием с DOM.

Оглавление