setScroll()

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

Основной синтаксис

scroll.setScroll(x, y);

Где:

  • x — горизонтальная координата (по оси X) в пикселях.
  • y — вертикальная координата (по оси Y) в пикселях.

Примечание: Locomotive Scroll по умолчанию работает с вертикальным скроллом, поэтому чаще всего используется только параметр y.

Параметры и особенности работы

  1. Координаты скролла

    • Вертикальный скролл (y): перемещает контент по вертикали.
    • Горизонтальный скролл (x): поддерживается при горизонтальных лэйаутах, требует включенной опции horizontal: true при инициализации.

  2. Влияние на прокручиваемые элементы setScroll() обновляет внутреннее состояние Locomotive Scroll, включая:

    • scroll.instance.scroll — текущее положение скролла.
    • Позиции всех элементов с атрибутами data-scroll и data-scroll-speed.
    • Эффекты параллакса и pinned элементы (data-scroll-sticky).

  3. Необходимость вызова после изменений DOM Если на страницу добавляются новые блоки динамически, их позиция не будет корректно отслеживаться до вызова setScroll().

// Добавление нового блока
const newSection = document.createElement('section');
newSection.setAttribute('data-scroll', '');
document.body.appendChild(newSection);

// Обновление позиции скролла
scroll.setScroll(0, scroll.scroll.instance.scroll.y);

Программное управление скроллом

setScroll() можно использовать для плавного или мгновенного перемещения к определенной точке страницы. В отличие от метода scroll.scrollTo(), который управляет анимацией прокрутки, setScroll() устанавливает положение моментально, что критично при синхронизации анимаций с внешними библиотеками, например, GSAP.

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

Использование с GSAP и другими анимациями

При интеграции с GSAP или другими анимационными библиотеками важно сначала вызвать setScroll(), чтобы элементы находились в правильной позиции. Это предотвращает «скачки» анимации и некорректное срабатывание триггеров:

gsap.fromTo('.box', { y: -100 }, { y: 0, scrollTrigger: { 
    trigger: '.box', 
    start: 'top bottom',
    onEnter: () => scroll.setScroll(0, scroll.scroll.instance.scroll.y)
}});

Пример динамической загрузки контента

fetch('/api/sections')
  .then(res => res.json())
  .then(data => {
    data.forEach(item => {
      const section = document.createElement('section');
      section.innerHTML = item.content;
      section.setAttribute('data-scroll', '');
      document.querySelector('#main').appendChild(section);
    });

    // Обновление состояния скролла после добавления элементов
    scroll.setScroll(0, scroll.scroll.instance.scroll.y);
  });

Рекомендации по использованию

  • Всегда вызывать после изменений DOM или вставки новых элементов.
  • Использовать для мгновенной синхронизации скролла с анимациями.
  • Не заменяет scroll.scrollTo(), если требуется плавная прокрутка.
  • В комбинации с update() можно обеспечить корректное отображение всех эффектов:
scroll.update();
scroll.setScroll(0, scroll.scroll.instance.scroll.y);

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

  • setScroll() моментально изменяет позицию скролла.
  • Обновляет внутренние состояния Locomotive Scroll и позиции элементов.
  • Не инициирует анимацию прокрутки — для этого используется scrollTo().
  • Критически важен при динамическом контенте или интеграции с анимационными библиотеками.

Эффективное использование setScroll() обеспечивает точную синхронизацию всех визуальных эффектов и предотвращает баги с параллаксом, pinned-элементами и динамическими блоками.

Оглавление