Метод setFitToSection

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


Синтаксис

fullpage_api.setFitToSection(boolean, duration);

Параметры:

  • boolean – логическое значение:

    • true – включает автоматический скроллинг к ближайшей секции.
    • false – отключает автоматический скроллинг.
  • duration (необязательный) – число в миллисекундах, задающее длительность анимации скролла. По умолчанию используется значение, заданное в настройках scrollingSpeed.


Основные возможности

  1. Принудительное выравнивание секций Метод позволяет моментально привести текущую секцию в полное отображение. Если пользователь остановил скролл между секциями или использовал ручное перемещение, вызов:

    fullpage_api.setFitToSection(true);

    гарантирует плавное возвращение к ближайшей секции.

  2. Отключение автоматического скроллинга Иногда необходимо временно приостановить автоматическую подгонку секции, например, при выполнении анимаций внутри контента. Для этого используется:

    fullpage_api.setFitToSection(false);

    После чего страница не будет автоматически смещаться к ближайшей секции, пока метод не будет вызван снова с true.

  3. Настройка скорости анимации Параметр duration позволяет гибко управлять визуальным эффектом. Пример:

    fullpage_api.setFitToSection(true, 1000);

    Здесь страница плавно переместится к ближайшей секции за 1000 миллисекунд, независимо от глобальной настройки scrollingSpeed.


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

  • Динамическая подгрузка контента Если высота секции меняется после загрузки данных (например, через AJAX), метод setFitToSection(true) корректирует положение скролла, чтобы новая высота секции отображалась полностью.

  • Прерывание скролла при анимации При выполнении сложных анимаций внутри секции можно временно отключить автоматический скролл:

    fullpage_api.setFitToSection(false);
    // выполнение анимации
    fullpage_api.setFitToSection(true);
  • Навигация по кнопкам или событиям Метод удобно применять после программного перехода между секциями, например, при клике на навигационные элементы:

    document.querySelector('#next').addEventListener('click', function() {
        fullpage_api.moveSectionDown();
        fullpage_api.setFitToSection(true, 800);
    });

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

  • moveSectionUp() и moveSectionDown() – после перемещения к другой секции setFitToSection(true) гарантирует точное выравнивание.
  • silentMoveTo(section) – метод перемещает к указанной секции без анимации; вызов setFitToSection(true) после этого добавляет плавный эффект возврата к секции при ручном скролле.
  • fitToSection (опция в настройках) – задаёт глобальное поведение; метод setFitToSection позволяет временно переопределить его в runtime.

Важные особенности

  • Метод не создаёт новые секции и не изменяет DOM – он лишь корректирует позицию страницы относительно существующих секций.
  • Если setFitToSection(true) вызван, пока уже выполняется анимация скролла, текущая анимация будет отменена и начнётся новая, соответствующая ближайшей секции.
  • Значение duration игнорируется при отключенном автоматическом скролле (false).

Рекомендации по применению

  • Использовать метод после динамических изменений контента или при нестандартных пользовательских событиях.
  • Не вызывать слишком часто при прокрутке мышью или тач-событиях, чтобы избежать эффекта “дёрганья” страницы.
  • Совмещать с методами setAllowScrolling и setKeyboardScrolling для полной гибкости управления скроллингом.

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