Типы прокрутки

В fullPage.js основным принципом работы является создание полноэкранных секций, между которыми можно перемещаться с помощью прокрутки. По умолчанию прокрутка организована вертикально, где каждая секция занимает весь экран, и переход осуществляется «вверх» или «вниз».

new fullpage('#fullpage', {
    autoScrolling: true,
    navigation: true,
    scrollHorizontally: false
});
  • autoScrolling — включает автоматическую прокрутку между секциями.
  • navigation — добавляет индикаторы навигации.
  • scrollHorizontally — позволяет использовать горизонтальные слайды внутри секции (по умолчанию выключен).

Горизонтальная прокрутка в fullPage.js используется внутри секций через механизм слайдов. Каждая секция может содержать несколько слайдов, между которыми пользователь перемещается горизонтально:

<div class="section">
    <div class="slide">Слайд 1</div>
    <div class="slide">Слайд 2</div>
</div>
new fullpage('#fullpage', {
    autoScrolling: true,
    navigation: true,
    controlArrows: true
});
  • controlArrows — включает стрелки для навигации по слайдам.
  • Горизонтальные слайды позволяют создавать интерактивные карусели внутри секции без нарушения основной вертикальной навигации.

Скролл с нормальной прокруткой (fitToSection и scrollOverflow)

fitToSection управляет поведением прокрутки: при включённом значении true fullPage.js автоматически подстраивает экран под ближайшую секцию после прокрутки. Если установить false, прокрутка становится более естественной, позволяя «проскользнуть» между секциями.

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

scrollOverflow активируется для секций с контентом, превышающим высоту окна. В этом случае появляется внутренний скролл, и fullPage.js автоматически инициализирует прокрутку с использованием scrollOverflowHandler:

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

Поддерживаются несколько вариантов скроллера: iScroll, perfectScrollbar и нативные методы браузера. Для мобильных устройств scrollOverflow позволяет корректно прокручивать длинный контент внутри полноэкранной секции.

Настройка скорости и плавности прокрутки

Параметры scrollingSpeed и easing определяют скорость и анимацию перехода между секциями:

new fullpage('#fullpage', {
    scrollingSpeed: 1000, // время прокрутки в мс
    easing: 'easeInOutCubic' // функция анимации
});
  • scrollingSpeed задаёт длительность анимации прокрутки.
  • easing позволяет выбрать один из стандартных CSS-easing или кастомные функции для плавного движения.

Параметр continuousVertical создаёт бесконечную вертикальную прокрутку, где после последней секции переход происходит к первой:

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

Программная прокрутка

fullPage.js предоставляет методы для программного управления скроллом:

  • fullpage_api.moveSectionUp() — переход на предыдущую секцию.
  • fullpage_api.moveSectionDown() — переход на следующую секцию.
  • fullpage_api.moveTo(section, slide) — переход к конкретной секции и слайду.
  • fullpage_api.silentMoveTo(section, slide) — мгновенный переход без анимации.
document.getElementById('nextSection').addEventListener('click', () => {
    fullpage_api.moveSectionDown();
});

Параметры взаимодействия с мышью и сенсорными экранами

  • touchSensitivity — регулирует чувствительность свайпов на мобильных устройствах.
  • normalScrollElements — элементы, внутри которых прокрутка будет обычной, игнорируя авто-скролл fullPage.js.
  • bigSectionsDestination — указывает, куда прокрутится экран при свайпе по большой секции: 'top', 'bottom' или 'null'.
new fullpage('#fullpage', {
    normalScrollElements: '.scrollable-div',
    bigSectionsDestination: 'bottom'
});

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

Комбинированные сценарии

  • Вертикальные секции с горизонтальными слайдами внутри.
  • Секции с длинным контентом и scrollOverflow.
  • Программная навигация и кастомные элементы управления.
  • Комбинация touchSensitivity и normalScrollElements для мобильных приложений.

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

Оглавление