Инерционная прокрутка

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

Основные принципы работы

FullPage.js разделяет страницу на отдельные секции (section) и слайды (slide), которые могут занимать всю высоту или ширину окна. Инерционная прокрутка активируется при скролле пользователя и обеспечивает:

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

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

Включение и настройка

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

new fullpage('#fullpage', {
    autoScrolling: true,
    scrollHorizontally: true,
    easing: 'easeInOutCubic',
    scrollingSpeed: 700,
    fitToSection: true,
    fitToSectionDelay: 1000,
    inertia: true
});

Пояснение ключевых параметров:

autoScrolling — включает режим прокрутки по секциям.
scrollHorizontally — позволяет инерционно скроллить горизонтальные слайды внутри секций.
easing — функция смягчения движения. Для инерционной прокрутки рекомендуется 'easeInOutCubic' или аналогичные кривые Безье.
scrollingSpeed — скорость анимации перехода между секциями, влияет на ощущение инерции.
fitToSection — если установлено true, автоматически подгоняет страницу под ближайшую секцию после завершения движения.
fitToSectionDelay — задержка перед подгонкой, что позволяет реализовать «плавное торможение».
inertia — ключевой флаг, который включает эффект продолжения скролла после действия пользователя (начиная с версии fullPage.js 4.x).

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

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

fullpage_api.setScrollingSpeed(900);
fullpage_api.setAllowScrolling(true);

setScrollingSpeed(speed) — задаёт индивидуальную скорость прокрутки для всех секций.
setAllowScrolling(true/false) — позволяет временно блокировать скролл, например, во время воспроизведения анимаций внутри секции.

Для симуляции физической инерции можно использовать сочетание scrollingSpeed и fitToSectionDelay, создавая эффект, при котором секция «плавно замедляется» перед остановкой.

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

На сенсорных экранах инерционная прокрутка реализуется иначе:

FullPage.js перехватывает события touchstart, touchmove и touchend.
Используется алгоритм прогнозирования скорости свайпа и продолжения движения в зависимости от силы и длины свайпа.
Для адаптивного контроля можно отключать или настраивать inertia через responsiveWidth и responsiveHeight:

new fullpage('#fullpage', {
    autoScrolling: true,
    inertia: true,
    responsiveWidth: 768,
    responsiveHeight: 600
});

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

Взаимодействие с якорями и навигацией

Инерционная прокрутка корректно интегрируется с анкорной навигацией:

new fullpage('#fullpage', {
    anchors: ['firstPage', 'secondPage', 'thirdPage'],
    inertia: true,
    menu: '#menu'
});

Переход по якорю срабатывает с плавным эффектом.
Пользовательский скролл при активной инерции плавно смещает текущую секцию, не ломая структуру навигации.
Метод moveTo(section, slide) учитывает инерцию и анимацию, создавая единый визуальный поток движения.