Метод setResponsive

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

Синтаксис

fullpage_api.setResponsive(responsive);

Параметры:

  • responsive — обязательный. Логическое значение (true или false):

    • true — включает адаптивный режим, отключая полноэкранный скроллинг, когда ширина окна меньше, чем значение, указанное в responsiveWidth или responsiveHeight.
    • false — выключает адаптивный режим, возвращая поведение fullPage.js к обычному полноэкранному скроллингу.

Настройка адаптивного порога

Полезно использовать вместе с опциями responsiveWidth и responsiveHeight при инициализации fullPage.js:

new fullpage('#fullpage', {
    responsiveWidth: 768,
    responsiveHeight: 600,
    // другие опции
});
  • responsiveWidth — ширина окна, ниже которой включается адаптивный режим.
  • responsiveHeight — высота окна, ниже которой включается адаптивный режим.

Метод setResponsive позволяет принудительно включить или выключить этот режим в любое время:

// Принудительно включить адаптивный режим
fullpage_api.setResponsive(true);

// Принудительно отключить адаптивный режим
fullpage_api.setResponsive(false);

Применение в реальном времени

Метод полезен при динамическом изменении размеров окна или при изменении условий интерфейса:

window.addEventListener('resize', function() {
    if (window.innerWidth < 1024) {
        fullpage_api.setResponsive(true);
    } else {
        fullpage_api.setResponsive(false);
    }
});

В этом примере полноэкранный скроллинг отключается на экранах меньше 1024px и включается обратно на больших экранах. Это позволяет создавать гибкую адаптивную логику без необходимости перезагружать страницу.

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

  1. Состояние секций При включении адаптивного режима fullPage.js отменяет фиксацию секций. Контент становится обычным, вертикально прокручиваемым.

  2. Возврат к обычному режиму Если setResponsive(false) вызывается после того, как был активирован адаптивный режим, библиотека восстанавливает все настройки и поведение полноэкранного скроллинга.

  3. События Метод не генерирует собственных событий. Для отслеживания изменений состояния адаптивного режима можно использовать стандартные события window.resize.

Комбинация с другими методами

setResponsive можно использовать совместно с методами управления навигацией и секциями:

  • moveTo(section, slide) — работает только при обычном полноэкранном режиме.
  • setAllowScrolling(boolean) — управление скроллингом возможно как в адаптивном, так и в полноэкранном режиме.

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

  • Использовать setResponsive при создании сайтов с несколькими точками прерывания.
  • Ставить проверку ширины окна перед вызовом, чтобы избежать лишних вызовов метода.
  • Совмещать с CSS медиа-запросами для управления стилями в адаптивном режиме.

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

Оглавление