update()

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

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

scroll.update();

Где scroll — это экземпляр Locomotive Scroll, созданный с помощью:

const scroll = new LocomotiveScroll({
  el: document.querySelector('[data-scroll-container]'),
  smooth: true
});

Вызов update() инициирует пересчёт размеров всех элементов с атрибутами data-scroll и data-scroll-section, а также обновляет текущую позицию прокрутки. Это особенно важно для сайтов с динамическим контентом: подгружаемыми изображениями, изменяющимися блоками или AJAX-запросами.

Когда использовать update()

Основные сценарии применения метода:

  1. Динамическая загрузка контента Если после загрузки страницы добавляются новые блоки через JavaScript (например, ленивые изображения или элементы галереи), необходимо вызвать update(), чтобы Locomotive Scroll корректно их учёл при прокрутке.

    const newContent = document.createElement('div');
newContent.setAttribute('data-scroll', '');
document.querySelector('[data-scroll-container]').appendChild(newContent);

scroll.update();

  2. Изменение размеров элементов При анимациях, раскрывающихся блоках или изменении текста высота элементов меняется. Без вызова update() прокрутка будет некорректной, поскольку библиотека использует старые размеры для расчёта позиций.

  3. Переключение видимости элементов При скрытии/показе блоков через CSS (display: none → display: block) метод гарантирует, что новые позиции будут пересчитаны, а скролл останется плавным и точным.

  4. Изменение структуры DOM Удаление или перестановка элементов также требует пересчёта координат. Любые изменения DOM, которые влияют на высоту контента, должны сопровождаться вызовом update().

Внутренние механизмы

Метод update() выполняет следующие операции:

  • Пересчёт размеров контейнера и секций: Locomotive Scroll вычисляет новую высоту всего контейнера и отдельных секций с атрибутами data-scroll-section.
  • Обновление кэша позиций элементов: все элементы с data-scroll получают новые координаты, что важно для корректной работы эффекта параллакса или анимаций на скролле.
  • Синхронизация виртуальной позиции прокрутки: если прокрутка была остановлена или изменена вручную, метод корректирует внутренние значения scroll.instance.scroll.y.

Взаимодействие с методами scrollTo() и событиями

После вызова update() можно безопасно использовать методы:

scroll.scrollTo('#target-element'); // прокрутка к элементу с учётом обновлённых координат

Также все события, привязанные через scroll.on('scroll', callback) или scroll.on('call', callback), будут работать корректно с обновлёнными позициями элементов.

Практические рекомендации

  • Частый вызов update() может снижать производительность: не вызывать его в каждом кадре анимации, а только после завершения значимых изменений DOM.
  • Комбинация с изображениями и шрифтами: при загрузке изображений через <img> стоит использовать событие load, чтобы вызвать update() только после того, как элементы полностью загрузились.
  • Анимации и параллакс: все динамические эффекты, зависящие от прокрутки, должны вызываться после update() для точного расчёта координат.

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

const images = document.querySelectorAll('img');
let loadedCount = 0;

images.forEach(img => {
  img.addEventListener('load', () => {
    loadedCount++;
    if (loadedCount === images.length) {
      scroll.update();
    }
  });
});

Метод update() обеспечивает гибкость и точность Locomotive Scroll при работе с динамическим контентом. Он гарантирует, что любые изменения в DOM будут правильно учтены, а прокрутка останется плавной и предсказуемой.

Оглавление