Добавление новых элементов

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

import LocomotiveScroll from 'locomotive-scroll';

const scroll = new LocomotiveScroll({
  el: document.querySelector('[data-scroll-container]'),
  smooth: true,
  multiplier: 1,
  class: 'is-revealed'
});
  • el – элемент-контейнер, в котором будет происходить скролл.
  • smooth – включение плавного скролла.
  • multiplier – коэффициент скорости скролла.
  • class – CSS-класс, который библиотека добавляет к элементам при их появлении в области видимости.

Эта базовая инициализация создаёт каркас для дальнейшей работы с элементами страницы.

Добавление новых элементов динамически

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

// Создание нового элемента
const newSection = document.createElement('section');
newSection.setAttribute('data-scroll', '');
newSection.innerHTML = `<h2>Новая секция</h2>`;

// Добавление на страницу
document.querySelector('[data-scroll-container]').appendChild(newSection);

// Обновление Locomotive Scroll
scroll.update();
  • Метод scroll.update() пересчитывает позиции всех элементов, отмеченных атрибутом data-scroll.
  • Без вызова update() новые элементы не будут анимироваться и не будут участвовать в плавном скролле.

Работа с data-scroll атрибутами

Для новых элементов важно правильно задать атрибуты, которые Locomotive Scroll использует для анимации и управления поведением:

  • data-scroll – делает элемент отслеживаемым библиотекой.
  • data-scroll-speed – изменяет скорость скролла элемента относительно основного потока.
  • data-scroll-delay – добавляет задержку анимации при появлении.
  • data-scroll-direction="horizontal" – задаёт горизонтальный скролл для конкретного блока.

Пример:

<section data-scroll data-scroll-speed="2">
  <h2>Элемент с ускорением скролла</h2>
</section>

После добавления элементов с такими атрибутами необходимо выполнить scroll.update().

Использование событий для новых элементов

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

scroll.on('call', (func, direction, el) => {
  if (func === 'animate-section') {
    el.classList.add('active');
  }
});

Чтобы событие сработало на вновь добавленном элементе:

newSection.setAttribute('data-scroll-call', 'animate-section');
scroll.update();
  • data-scroll-call – имя события, которое вызывается при попадании элемента в область видимости.
  • Метод scroll.update() гарантирует, что библиотека узнает о новых элементах с data-scroll-call.

Поддержка динамического контента через MutationObserver

Для сайтов с часто меняющимся контентом можно использовать MutationObserver, чтобы автоматически обновлять Locomotive Scroll при добавлении новых элементов:

const container = document.querySelector('[data-scroll-container]');

const observer = new MutationObserver(() => {
  scroll.update();
});

observer.observe(container, { childList: true, subtree: true });
  • childList: true отслеживает добавление или удаление дочерних элементов.
  • subtree: true позволяет отслеживать изменения в любых вложенных элементах.
  • Каждый раз, когда DOM меняется, вызывается scroll.update(), что гарантирует корректное поведение скролла.

Комбинирование с анимациями

Добавленные элементы часто используют CSS-анимации при появлении. Locomotive Scroll автоматически добавляет класс is-revealed к элементам при попадании в область видимости, что позволяет запускать анимации через CSS:

section {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.6s ease-out;
}

section.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

Для динамически добавленных элементов достаточно убедиться, что они имеют data-scroll и вызвать scroll.update(). Класс is-revealed будет применяться автоматически при их скролле в зону видимости.

Итоговые рекомендации по добавлению новых элементов

  1. Все новые элементы должны иметь атрибут data-scroll.
  2. После добавления на страницу обязательно вызывать scroll.update().
  3. Для событий использовать data-scroll-call и слушать через scroll.on('call').
  4. При динамическом контенте удобно применять MutationObserver для автоматического обновления.
  5. CSS-анимации следует привязывать к классам, которые Locomotive Scroll добавляет автоматически.

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

Оглавление