Настройка области закрепления

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

import LocomotiveScroll from 'locomotive-scroll';

const scroll = new LocomotiveScroll({
  el: document.querySelector('#scroll-container'), // контейнер прокрутки
  smooth: true, // плавная прокрутка
  multiplier: 1.0, // коэффициент скорости прокрутки
  lerp: 0.1 // коэффициент сглаживания
});

Ключевые параметры:

  • el — DOM-элемент, в котором будет выполняться скролл. Обычно это основной блок контента (<main> или <div id="scroll-container">).
  • smooth — включает или отключает плавную анимацию скролла.
  • multiplier — регулирует скорость скролла относительно стандартного. Значение выше 1 ускоряет прокрутку, меньше 1 — замедляет.
  • lerp — коэффициент сглаживания. Чем меньше значение, тем плавнее движение, но сильнее задержка.

Настройка области закрепления (Scroll Pinning)

Функция закрепления элементов в Locomotive Scroll позволяет привязать блок к экрану на определённый промежуток прокрутки, создавая эффект «sticky». Для этого используется атрибут data-scroll с указанием типа:

<section data-scroll-container>
  <div data-scroll data-scroll-sticky data-scroll-target="#section1">
    Закреплённый элемент
  </div>
  <div id="section1" style="height: 2000px;">
    Контент для прокрутки
  </div>
</section>

Разбор атрибутов:

  • data-scroll — обязательный атрибут для всех элементов, участвующих в прокрутке.
  • data-scroll-sticky — включает режим закрепления для элемента.
  • data-scroll-target — указывает блок, относительно которого элемент будет закреплён. Обычно это родительский контейнер или секция.

Элемент остаётся закреплённым на экране до тех пор, пока прокручивается контейнер, заданный в data-scroll-target.

Тонкая настройка поведения закрепления

Locomotive Scroll поддерживает дополнительные параметры через JavaScript для точной настройки «приклеивания» элементов:

const scroll = new LocomotiveScroll({
  el: document.querySelector('#scroll-container'),
  smooth: true,
  smartphone: {
    smooth: false, // отключение на мобильных
  },
  tablet: {
    smooth: true,
    breakpoint: 1024
  }
});

Особенности управления закреплением:

  1. Адаптивность

    • На мобильных устройствах рекомендуется отключать smooth, так как плавная прокрутка может конфликтовать с нативной.
    • Для планшетов и больших экранов можно оставить плавность, но регулировать скорость через multiplier.

  2. Высота закрепления

    • Высота блока-контейнера, указанного в data-scroll-target, определяет продолжительность закрепления.
    • Для точного контроля часто используют CSS-подстройку высоты родителя с учётом высоты sticky-элемента.

  3. Производительность

    • Избегать большого количества закреплённых элементов одновременно.
    • Использовать requestAnimationFrame только внутри событий Locomotive Scroll, чтобы не создавать лишнюю нагрузку на рендер.

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

Закреплённые элементы часто сопровождаются анимацией при прокрутке. Для интеграции с GSAP или другими библиотеками достаточно подписаться на события Locomotive Scroll:

scroll.on('scroll', (args) => {
  const progress = args.scroll.y; // текущая позиция прокрутки
  // анимация элемента при прокрутке
  gsap.to('#animated', { y: progress * 0.2 });
});
  • Событие 'scroll' срабатывает каждый раз при обновлении позиции прокрутки.
  • Параметры args.scroll.y и args.currentElements позволяют отслеживать позиции и прогресс отдельных элементов.

Рекомендации по CSS для закреплённых элементов

Для корректного поведения sticky-элементов в Locomotive Scroll важно:

  1. Задать position: relative для родительского контейнера.
  2. Элемент с data-scroll-sticky должен иметь position: absolute или position: sticky не в конфликтах с другими стилями.
  3. Контролировать высоту родителя, чтобы закрепление не обрывалось раньше времени.

Пример CSS:

#scroll-container {
  position: relative;
}

[data-scroll-sticky] {
  top: 0;
  width: 100%;
  z-index: 10;
}

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

Советы по отладке закрепления

  1. Проверить, что контейнер с data-scroll-container имеет правильные размеры и overflow.
  2. Использовать scroll.update() после динамического изменения контента, чтобы Locomotive Scroll пересчитал позиции элементов.
  3. Для сложных страниц с несколькими sticky-блоками рекомендуется устанавливать разные родительские контейнеры и точно указывать data-scroll-target.

Такая комбинация JavaScript-настроек и корректной структуры DOM обеспечивает плавное, предсказуемое поведение закреплённых элементов, полностью используя возможности Locomotive Scroll.

Оглавление