Множественные экземпляры на странице

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

Структура HTML для нескольких скролл-зон

Каждый экземпляр Locomotive Scroll привязывается к отдельному контейнеру с атрибутом data-scroll-container. Пример структуры страницы с двумя скролл-зонами:

<div class="scroll-section" id="section1" data-scroll-container>
  <section data-scroll-section>
    <h2 data-scroll data-scroll-speed="2">Первая секция</h2>
    <p data-scroll data-scroll-delay="0.1">Текст первой секции...</p>
  </section>
</div>

<div class="scroll-section" id="section2" data-scroll-container>
  <section data-scroll-section>
    <h2 data-scroll data-scroll-speed="3">Вторая секция</h2>
    <p data-scroll data-scroll-delay="0.2">Текст второй секции...</p>
  </section>
</div>

Каждая .scroll-section становится отдельным экземпляром Locomotive Scroll. Важно, чтобы контейнеры не перекрывали друг друга по position и имели уникальные идентификаторы.

Инициализация нескольких экземпляров

Для каждой скролл-зоны создается свой объект LocomotiveScroll. Например:

import LocomotiveScroll from 'locomotive-scroll';

const scrollInstances = [];

document.querySelectorAll('[data-scroll-container]').forEach(container => {
  const instance = new LocomotiveScroll({
    el: container,
    smooth: true,
    multiplier: 1.0,
    class: 'is-inview'
  });
  
  scrollInstances.push(instance);
});

Ключевые моменты:

  • el — контейнер, на который будет привязан скролл.
  • smooth — включает плавный скроллинг.
  • multiplier — коэффициент скорости прокрутки.
  • class — CSS-класс, добавляемый к элементам при появлении в зоне видимости.

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

Обновление экземпляров при изменении DOM

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

scrollInstances.forEach(instance => instance.update());

Рекомендуется вызывать update() после:

  • Асинхронной подгрузки контента.
  • Изменения размеров блока.
  • Анимаций, влияющих на высоту контейнера.

Связывание событий между экземплярами

Каждый экземпляр имеет собственные события:

instance.on('scroll', (args) => {
  console.log('Скролл экземпляра:', args);
});

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

scrollInstances[0].on('scroll', ({ scroll }) => {
  scrollInstances[1].scrollTo(scroll.y);
});

Это позволяет реализовать эффект параллакса или синхронной прокрутки нескольких секций.

Управление ресурсами

Множественные экземпляры требуют внимательного подхода к производительности:

  • Ограничивать количество активных экземпляров.
  • Удалять ненужные экземпляры при переходе на другие страницы:
instance.destroy();
  • Использовать requestAnimationFrame для синхронизации сторонних анимаций с прокруткой.

Настройка уникальных эффектов для каждого экземпляра

Каждый контейнер может иметь свои data-scroll-speed и data-scroll-delay для анимации отдельных элементов. Например, первая секция может иметь ускоренный текст, вторая — плавный параллакс изображений. Это достигается путем указания разных значений атрибутов:

<h2 data-scroll data-scroll-speed="4">Заголовок с ускорением</h2>
<img data-scroll data-scroll-speed="1.5" src="image.jpg" />

Рекомендации по структуре стилей

  • Контейнеры с data-scroll-container должны иметь position: relative или position: fixed в зависимости от требуемого эффекта.
  • Избегать вложенности data-scroll-container внутри другого контейнера с таким же атрибутом.
  • Использовать единый подход к размеру и отступам, чтобы не нарушать расчёт прокрутки для разных экземпляров.

Вывод

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

Оглавление