Автоматическая адаптация высоты

Библиотека fullPage.js предоставляет возможность создавать веб-страницы с полноэкранной прокруткой. Одной из ключевых особенностей при работе с динамическим контентом является автоматическая адаптация высоты секций. Это особенно важно, если содержимое каждой секции отличается по объёму и не укладывается в фиксированную высоту экрана.

Включение автоадаптации высоты

Для того чтобы включить автоматическую подгонку высоты под контент, используется опция autoScrolling совместно с fitToSection. Однако ключевой параметр для динамической высоты — это scrollOverflow и метод updateAutoScrolling.

Пример инициализации:

new fullpage('#fullpage', {
    autoScrolling: true,      // включает прокрутку секций как у слайдера
    scrollOverflow: true,     // добавляет скролл для секций с большим контентом
    fitToSection: false,      // отключает принудительную подгонку к экрану
    responsiveHeight: 600     // минимальная высота секции для адаптации
});

Здесь scrollOverflow: true позволяет секциям с содержимым, превышающим высоту экрана, корректно отображаться с вертикальным скроллом. fitToSection: false предотвращает насильственное растягивание секций до полной высоты окна, что необходимо для корректной работы автоадаптации.

Методы для обновления высоты

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

fullpage_api.reBuild();

Метод reBuild пересчитывает высоту всех секций и корректно обновляет скролл. Также используется метод:

fullpage_api.updateAutoScrolling(true);

Он активирует пересчёт и подгонку секций под текущий размер контента. Это важно при изменении размеров окна или динамическом добавлении контента.

Адаптация под контент с переменной высотой

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

  1. scrollOverflow: true – добавляет вертикальный скролл для длинного контента.
  2. responsiveHeight – задаёт минимальную высоту секции при адаптации.
  3. fitToSection: false – предотвращает принудительное растягивание коротких секций.

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

new fullpage('#fullpage', {
    autoScrolling: true,
    fitToSection: false,
    scrollOverflow: true,
    responsiveHeight: 500
});

В этом случае секции с коротким контентом будут занимать только необходимую высоту, а длинные секции получат прокрутку.

Динамическое добавление контента

Если секция загружается динамически, после добавления элементов необходимо вызвать:

fullpage_api.reBuild();

или, если требуется плавная подгонка:

fullpage_api.fitToSection();

Важно: fitToSection работает только если включена опция autoScrolling: true. Она плавно подгоняет высоту секции под экран, но не растягивает короткий контент, если отключен fitToSection: false.

Настройка overflow с плагином

Для корректного отображения прокрутки внутри секции можно использовать библиотеку scrollOverflowHandler (например, iscroll или better-scroll). Это позволяет:

  • Добавлять внутренний скролл без нарушения fullPage.js.
  • Обеспечивать плавный переход между секциями.
  • Автоматически пересчитывать высоту при изменении содержимого.

Пример инициализации с кастомным overflow:

new fullpage('#fullpage', {
    scrollOverflow: true,
    scrollOverflowOptions: {
        scrollbars: true,
        mouseWheel: true,
        interactiveScrollbars: true
    }
});

Реакция на изменение размера окна

Для адаптивных интерфейсов важно, чтобы высота секций корректно пересчитывалась при изменении размеров окна браузера. FullPage.js предоставляет события:

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

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

Основные рекомендации

  • Для длинного контента включать scrollOverflow.
  • Для короткого и среднего контента использовать responsiveHeight и отключать принудительную подгонку.
  • После динамических изменений контента всегда вызывать reBuild().
  • Для плавной подгонки секций использовать fitToSection() с autoScrolling.

Эти методы обеспечивают корректное отображение всех секций, предотвращают пустые области и лишний скролл, создавая удобный и адаптивный интерфейс.

Оглавление