Метод destroy

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

Синтаксис

fullpage_api.destroy(all);

  • all — логическое значение (true или false).

    • true — удаляет все изменения, включая стили inline, добавленные библиотекой, а также возвращает структуру страниц к исходному состоянию.
    • false — отключает функционал прокрутки, но сохраняет структуру DOM, позволяя при необходимости повторно инициализировать fullPage.js.

Применение метода

Метод destroy чаще всего используется в следующих сценариях:

  1. Динамическая подгрузка контента Когда структура страницы изменяется динамически (например, подгружается новый контент через AJAX), полный пересозданный скролл требуется для корректного отображения.

    // Удаляем fullPage.js перед изменением DOM
fullpage_api.destroy(true);

// Вносим изменения в структуру страниц
document.querySelector('#section1').innerHTML = "<p>Новый контент</p>";

// Повторная инициализация
new fullpage('#fullpage', { autoScrolling: true });

  2. Адаптивные сценарии В мобильных версиях сайта иногда необходимо отключать fullPage.js для улучшения UX, когда вертикальная прокрутка естественным образом заменяет секции.

    if (window.innerWidth < 768) {
    fullpage_api.destroy(true);
}

  3. Переключение между режимами прокрутки Возможность включать и отключать fullPage.js без перезагрузки страницы делает метод destroy незаменимым при реализации переключателей между стандартной прокруткой и “полнопанельным” режимом.

Влияние на DOM и стили

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

  • Убирает класс fp-enabled с контейнера #fullpage.
  • Убирает классы fp-section, fp-tableCell и другие вспомогательные классы, добавленные библиотекой.
  • Убирает встроенные стили transform, height, overflow, добавленные для секций и контейнеров.
  • Удаляет все события, связанные с прокруткой, колесиком мыши, тач-событиями и клавишами.
  • Сбрасывает навигационные элементы, включая точки навигации (fp-nav) и стрелки.

Если передать false, визуальные изменения останутся, а функционал скролла будет отключён, что позволяет временно заморозить библиотеку без полного отката структуры DOM.

Примеры комбинаций с другими методами

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

// Разрушаем текущую инициализацию
fullpage_api.destroy(true);

// Обновляем структуру секций
const newSection = document.createElement('div');
newSection.classList.add('section');
newSection.innerHTML = '<h2>Новая секция</h2>';
document.querySelector('#fullpage').appendChild(newSection);

// Перезапускаем fullPage.js
new fullpage('#fullpage', {
    autoScrolling: true,
    navigation: true
});

Важные нюансы

  • Метод destroy нельзя использовать до полной инициализации fullPage.js, иначе вызов не будет иметь эффекта.
  • После destroy(true) все события библиотеки будут удалены, поэтому любые слушатели, зависящие от afterLoad или onLeave, также перестанут работать.
  • Для временного отключения fullPage.js лучше использовать destroy(false) или переключение autoScrolling через API, чтобы избежать лишней переработки DOM.
  • При работе с responsiveWidth и responsiveHeight часто вызывают destroy при срабатывании условий адаптивности, чтобы предотвратить конфликты с обычной прокруткой.

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

Оглавление