Вспомогательные методы

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

import LocomotiveScroll from 'locomotive-scroll';

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

После инициализации доступны следующие ключевые вспомогательные методы:

  • update() – обновляет внутренние размеры и позиции элементов, если структура DOM изменилась после инициализации.
  • destroy() – полностью отключает библиотеку, возвращая страницу в стандартный режим прокрутки.
  • scrollTo(target, options) – плавная прокрутка к элементу или координатам с возможностью задания скорости, отступа и эффекта смещения.

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

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

Управление событиями скролла

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

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

Пример подписки на событие scroll:

scroll.on('scroll', (args) => {
  console.log('Текущая позиция Y:', args.scroll.y);
});

Для call можно определить функцию обратного вызова для конкретного элемента:

<div data-scroll-call="animate" data-scroll-repeat>
  Контент
</div>
scroll.on('call', (func, direction, obj) => {
  if(func === 'animate' && direction === 'enter') {
    obj.el.classList.add('active');
  }
});

Вспомогательные методы управления элементами

setScroll(x, y)

Позволяет программно задать положение скролла по осям X и Y без анимации. Пример:

scroll.setScroll(0, 500); // Устанавливает вертикальный скролл на 500px

start() и stop()

Методы для временной остановки или возобновления работы скролла. Полезно при показе модальных окон или интерактивных анимаций.

scroll.stop();  // Останавливает прокрутку
scroll.start(); // Возобновляет прокрутку

on(event, callback) и off(event, callback)

Позволяют добавлять и удалять слушатели событий для различных действий скролла.

const onScr oll = (obj) => console.log(obj.scroll.y);
scroll.on('scroll', onScroll);
scroll.off('scroll', onScroll);

Методы для работы с размерами и позициями

  • updateElements() – пересчитывает размеры и позиции всех элементов с атрибутами data-scroll и data-scroll-speed.
  • getElementPosition(el) – возвращает текущую позицию элемента в координатах скролла.

Пример:

const section = document.querySelector('#section-5');
const pos = scroll.getElementPosition(section);
console.log(pos); // { top: 1200, left: 0, bottom: 1500 }
  • getScrollPosition() – возвращает объект с текущими координатами скролла { x, y }.
const current = scroll.getScrollPosition();
console.log(current.y); // Текущая вертикальная позиция

Управление классами и атрибутами через скролл

Библиотека позволяет добавлять автоматические классы при пересечении элементов с определёнными точками на экране. Для этого используют атрибуты:

  • data-scroll-class – класс, который добавляется при появлении элемента.
  • data-scroll-repeat – позволяет повторно срабатывать при каждом входе/выходе.
  • data-scroll-offset – смещение точки срабатывания в пикселях или процентах.

Пример разметки и стиля:

<section data-scroll data-scroll-class="visible" data-scroll-repeat>
  Контент
</section>
.visible {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.8s ease-out;
}

Адаптация к изменениям DOM

Если страница динамически изменяет контент (например, подгрузка новых блоков или изображений), необходимо регулярно вызывать:

scroll.update();           // Пересчитывает позиции и размеры
scroll.updateElements();   // Обновляет параметры элементов с data-scroll

Без этого новые элементы не будут корректно обрабатываться библиотекой.

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

Оглавление