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

new LocomotiveScroll(options) Создает экземпляр Locomotive Scroll с заданными параметрами. Основные свойства объекта options:

  • el – DOM-элемент, содержащий скролл. Обязательный параметр.
  • smooth – включение плавного скролла (true/false).
  • direction – направление прокрутки ("vertical" или "horizontal").
  • reloadOnContextChange – обновление скролла при изменении DOM.
  • lerp – коэффициент плавности (0–1).

Пример инициализации:

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

destroy() Полностью уничтожает экземпляр, удаляет обработчики событий и сбрасывает стили, установленные библиотекой.

update() Обновляет внутренние вычисления размеров и позиции элементов, особенно полезно при динамическом изменении контента или размеров окна.

start() и stop() Позволяют управлять активностью скролла. stop() приостанавливает обработку прокрутки, start() возобновляет.

Методы управления прокруткой

scrollTo(target, options) Плавно прокручивает страницу до заданной позиции или элемента. Параметры:

  • target – селектор, DOM-элемент, число пикселей или процент.

  • options – объект с настройками:

    • offset – смещение относительно целевой позиции.
    • duration – длительность анимации в мс.
    • easing – функция интерполяции движения.
    • disableLerp – отключает плавность на время прокрутки.

Пример:

scroll.scrollTo('#section-2', {
  offset: -50,
  duration: 1200,
  easing: [0.25, 0.0, 0.35, 1.0]
});

getScroll() Возвращает объект с текущими координатами скролла:

{ x: 0, y: 1200 }

setScroll(x, y) Устанавливает текущую позицию прокрутки в пикселях без анимации.

Методы работы с элементами и наблюдением

on(event, callback) Подписка на события. Основные события:

  • scroll – срабатывает при каждой прокрутке, callback получает объект с координатами.
  • call – вызывается при достижении элемента с атрибутом data-scroll-call.
  • callOnce – вызывается один раз при пересечении элемента.
  • resize – при изменении размеров окна.

Пример:

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

off(event, callback) Удаляет ранее зарегистрированный обработчик события.

updateElements() Обновляет все элементы, отслеживаемые Locomotive Scroll, пересчитывает их позиции и видимость.

Методы управления классами и видимостью элементов

setInView(el, inView) Принудительно изменяет состояние видимости элемента. Полезно для кастомного контроля анимаций.

isInView(el) Возвращает true или false в зависимости от того, находится ли элемент в зоне видимости.

setAttributes(el, attributes) Позволяет динамически задавать атрибуты, используемые библиотекой для отслеживания элементов (data-scroll, data-scroll-speed, data-scroll-delay и т.д.).

Методы работы с анимациями и скоростью прокрутки

setSpeed(speed) Позволяет изменять скорость прокрутки, применяется только если включена плавность.

getSpeed() Возвращает текущую скорость скролла.

setDirection(direction) Изменяет направление прокрутки на лету ("vertical" или "horizontal").

getDirection() Возвращает текущее направление прокрутки.

disable() и enable() Отключают и включают скролл без уничтожения экземпляра.

Методы отладки и вспомогательные

debug() Выводит в консоль текущие настройки, позиции и элементы, отслеживаемые библиотекой.

checkResize() Принудительная проверка размеров контейнера и пересчет внутренних значений без полного обновления.

refresh() Объединяет действия update() и updateElements(), используется при сложных динамических изменениях DOM.

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

setScrollEvent(element, handler) Позволяет привязать кастомный обработчик к конкретному элементу, отслеживаемому Locomotive Scroll.

triggerCall(name, state) Программно вызывает событие call для элемента с атрибутом data-scroll-call="name".

destroyElement(el) Удаляет элемент из отслеживаемого списка без полной перезагрузки скролла.

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

Оглавление