Метод reBuild

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

Синтаксис

fullpage_api.reBuild();
  • fullpage_api — объект, через который осуществляется доступ к методам fullPage.js.
  • Метод не принимает аргументов.
  • Возвращает undefined.

Основные сценарии использования

  1. Динамическое добавление секций Если после инициализации fullPage.js добавляется новая секция в DOM, стандартный скроллинг и навигация по секциям может работать некорректно. Вызов reBuild() позволяет пересчитать высоты и позиции всех секций, чтобы новые элементы корректно интегрировались в прокрутку.

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

  3. Адаптация после изменения CSS Если обновляются стили, влияющие на высоту секций (например, padding, margin, flex-контейнеры), метод пересчитывает размеры, чтобы интерфейс оставался корректным на всех устройствах.

Принцип работы

При вызове reBuild() fullPage.js выполняет следующие действия:

  • Сбрасывает внутренние размеры секций и слайдов;
  • Пересчитывает высоты и позиции каждой секции относительно контейнера;
  • Обновляет скрипты навигации, включая навигационные точки (dots) и слайды;
  • Переподключает обработчики событий для скроллинга и свайпа на мобильных устройствах;
  • Сохраняет текущую активную секцию, предотвращая “прыжок” на другую позицию после пересчета.

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

Метод reBuild() часто применяется вместе с динамическими методами библиотеки:

  • addSection / removeSection — для добавления или удаления секций;
  • update — для частичной перезагрузки отдельных параметров (например, после изменения настроек);
  • responsive — для адаптивных сценариев, когда макет меняется при изменении ширины окна.

Пример использования с добавлением секции:

fullpage_api.addSection('<div class="section">Новая секция</div>');
fullpage_api.reBuild();

Особенности и рекомендации

  • Метод не пересоздаёт fullPage.js с нуля, поэтому его можно вызывать многократно без разрушения текущей инициализации.
  • Вызов reBuild() может быть ресурсозатратным на страницах с большим количеством секций и сложными анимациями, поэтому рекомендуется использовать его только при изменении DOM, влияющем на размеры или порядок секций.
  • Если изменения касаются только контента внутри слайда, иногда достаточно вызвать метод update() для обновления внутренних элементов без полной переработки скроллинга.

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

1. Динамическая загрузка контента:

fetch('/api/sections')
  .then(res => res.json())
  .then(data => {
    data.forEach(item => {
      const section = document.createElement('div');
      section.classList.add('section');
      section.innerHTML = `<h2>${item.title}</h2><p>${item.text}</p>`;
      document.querySelector('#fullpage').appendChild(section);
    });
    fullpage_api.reBuild();
  });

2. Изменение размеров после асинхронной загрузки изображений:

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

images.forEach(img => {
  img.onl oad = () => {
    loadedCount++;
    if (loadedCount === images.length) {
      fullpage_api.reBuild();
    }
  };
});

3. Адаптация под мобильные устройства при изменении ширины окна:

window.addEventListener('resize', () => {
  fullpage_api.reBuild();
});

Вывод

Метод reBuild обеспечивает стабильную работу fullPage.js при динамических изменениях DOM и является обязательным инструментом для страниц с интерактивным и адаптивным контентом. Его использование гарантирует, что секции и слайды будут корректно отображаться, а скроллинг оставаться плавным и предсказуемым.

Оглавление