Прокрутка внутри секций

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

Вертикальная прокрутка внутри секций

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

new fullpage('#fullpage', {
    scrollOverflow: true
});

Ключевые моменты:

  • scrollOverflow: true активирует автоматическую прокрутку содержимого внутри секций.
  • Для корректной работы требуется подключение дополнительного скрипта scrolloverflow.min.js, который обеспечивает обработку прокрутки.
  • FullPage.js автоматически добавляет свой контейнер с классом fp-scrollable, внутри которого происходит скроллинг.
<div class="section">
    <div class="fp-scrollable">
        <div class="fp-scroller">
            <!-- Длинный контент -->
        </div>
    </div>
</div>
  • Полезно использовать CSS для ограничения высоты или для стилизации скролла:
.fp-scrollable {
    max-height: 100vh;
    overflow: hidden;
}
.fp-scroller {
    overflow-y: auto;
    height: 100%;
}

Горизонтальная прокрутка внутри секций

FullPage.js позволяет создавать горизонтальные слайды внутри секции с опцией slidesNavigation. Если контент горизонтальный, можно сочетать прокрутку внутри слайдов и вертикальную прокрутку между секциями.

new fullpage('#fullpage', {
    scrollOverflow: true,
    slidesNavigation: true,
    controlArrows: true
});

Особенности горизонтальной прокрутки:

  • Каждый слайд является отдельным элементом с классом slide.
  • Прокрутка внутри слайдов управляется с помощью мыши или тач-жестов.
  • Для длинного контента в слайде применяются те же контейнеры fp-scrollable и fp-scroller.

Настройка scrollOverflow

FullPage.js предоставляет расширенные возможности настройки поведения внутренней прокрутки через объект scrollOverflowOptions:

new fullpage('#fullpage', {
    scrollOverflow: true,
    scrollOverflowOptions: {
        scrollbars: true,
        mouseWheel: true,
        interactiveScrollbars: true,
        click: true
    }
});
  • scrollbars: true — отображение полос прокрутки.
  • mouseWheel: true — прокрутка колесиком мыши.
  • interactiveScrollbars: true — возможность перетаскивать ползунок мышью.
  • click: true — активирует клики на контенте внутри прокрутки.

Эти параметры передаются внутреннему плагину iscroll.js, который используется fullPage.js для управления overflow.

Работа с динамическим контентом

Если содержимое секции изменяется после инициализации fullPage.js, необходимо обновить прокрутку внутри секции:

fullpage_api.reBuild();
  • Метод reBuild() пересчитывает размеры секций и обновляет контейнеры fp-scrollable.
  • Важно вызывать его после загрузки динамического контента, иначе прокрутка может работать некорректно.

Пользовательские события прокрутки

FullPage.js позволяет отслеживать прокрутку внутри секции с помощью событий onScrollOverflow и afterRender:

new fullpage('#fullpage', {
    scrollOverflow: true,
    afterRender: function(){
        console.log('FullPage инициализирован');
    },
    onScrollOverflow: function(section, scrollable){
        console.log('Секция прокручена', section);
    }
});
  • section — объект текущей секции.
  • scrollable — элемент с классом fp-scrollable, внутри которого можно отслеживать события scroll стандартными средствами Jav * aScript:
scrollable.addEventListener('scroll', function() {
    console.log('Прокрутка внутри секции');
});

Особенности мобильных устройств

На мобильных устройствах внутренний скролл работает через тач-события, при этом:

  • Секция остаётся активной, пока не достигнут край контента.
  • Прокрутка между секциями срабатывает после достижения верхнего или нижнего края прокручиваемого контента.
  • Для корректной работы рекомендуется включать fitToSection: false или использовать normalScrollElements.
new fullpage('#fullpage', {
    scrollOverflow: true,
    normalScrollElements: '.fp-scrollable',
});
  • normalScrollElements позволяет fullPage.js игнорировать прокрутку в указанных контейнерах и не переключать секции.

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

  • Необходимо подключать scrolloverflow.min.js после самого fullPage.js.
  • Прокрутка внутри секции требует, чтобы родительский контейнер имел фиксированную высоту (height: 100vh).
  • Сложные вложенные элементы могут требовать дополнительного CSS для корректной работы скролла.
  • Для плавности рекомендуется использовать overflow: hidden для внешних контейнеров и overflow-y: auto для внутренних.

Прокрутка внутри секций в fullPage.js открывает широкие возможности для создания многоуровневых интерфейсов, сохраняя при этом плавную навигацию между основными секциями. Правильная настройка scrollOverflow и обработка событий позволяют интегрировать длинный контент без нарушения UX и дизайна сайта.

Оглавление