Метод refresh

Метод refresh является ключевым инструментом управления сценами в библиотеке ScrollMagic, позволяя синхронизировать размеры и позиции элементов с текущим состоянием страницы после изменений DOM или ресайза окна браузера. Он напрямую влияет на корректность срабатывания триггеров и анимаций.

Назначение метода

refresh выполняет повторный расчёт следующих параметров для каждой сцены:

  • triggerElement — элемент, относительно которого активируется сцена; метод учитывает его текущую позицию на странице.
  • duration — длительность сцены, которая может зависеть от размеров контента или окна.
  • offset — смещение триггера, обновляется в соответствии с новыми размерами или стилями.

Метод необходим при динамическом изменении DOM, например:

  • добавление или удаление блоков контента;
  • изменение размеров элементов через CSS;
  • использование анимаций, влияющих на высоту страницы.

Без вызова refresh ScrollMagic может неправильно определить момент срабатывания сцены, что приведёт к визуальным багам или некорректной работе анимаций.

Синтаксис

scene.refresh();

Метод вызывается на экземпляре сцены (ScrollMagic.Scene) и не требует параметров. Он возвращает саму сцену, что позволяет использовать цепочку методов:

scene
    .setPin("#pinElement")
    .addTo(controller)
    .refresh();

Особенности работы

  1. Автоматическое обновление ScrollMagic автоматически вызывает refresh при изменении размеров окна браузера. Однако, при динамических изменениях DOM рекомендуется вызывать метод вручную, чтобы обновления происходили немедленно.

  2. Производительность Частый вызов refresh может нагрузить браузер, особенно при большом количестве сцен. Рекомендуется вызывать метод только после завершения всех изменений DOM.

  3. Связь с контроллером Метод refresh синхронизируется с контроллером (ScrollMagic.Controller). Если сцена привязана к контроллеру, вызов refresh инициирует пересчёт для всех сцен этого контроллера:

controller.update(true); // обновление всех сцен

Примеры использования

Обновление сцены после добавления контента

var scene = new ScrollMagic.Scene({
    triggerElement: "#section1",
    duration: 300
})
.setPin("#section1")
.addTo(controller);

// Добавляем динамический контент
document.querySelector("#section1").innerHTML += "<div class='new-item'>Новый элемент</div>";

// Обновляем сцену
scene.refresh();

Пересчёт сцен после ресайза блока

window.addEventListener("resize", function() {
    scene.refresh(); // пересчёт позиции триггера и длительности сцены
});

Взаимодействие с другими методами

  • update — используется для немедленного обновления состояния сцены. refresh пересчитывает размеры и позиции, а update сразу применяет новое состояние.
  • setDuration и setOffset — изменения этих параметров требуют последующего вызова refresh для корректного отображения.
scene.setDuration(400);
scene.refresh(); // пересчёт длительности и позиции

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

  • Вызывать refresh после всех изменений DOM, а не внутри цикла или частых событий, чтобы минимизировать нагрузку на браузер.
  • При динамическом контенте использовать совместно с update, если необходимо немедленное срабатывание анимаций.
  • Проверять, что сцена добавлена в контроллер перед вызовом refresh, иначе пересчёт не будет корректным.

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

Оглавление