Нормализация прокрутки

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

Подключение и базовая инициализация

Для начала необходимо подключить библиотеку fullPage.js и стили:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.22/fullpage.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.22/fullpage.min.js"></script>

Инициализация выполняется через объект new fullpage():

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

Ключевые параметры:

  • autoScrolling: true – включает вертикальную прокрутку в стиле «fullPage», скрывая стандартный скролл браузера.
  • fitToSection: true – автоматически выравнивает контент по экрану после скролла.
  • scrollingSpeed – задаёт скорость анимации перехода между секциями.
  • easing – управляет кривой анимации для плавного движения.

Понимание нормализации прокрутки

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

  • Десктоп: колесико мыши и клавиши Page Up/Down инициируют переход на следующую или предыдущую секцию.
  • Мобильные устройства: тач-жесты обрабатываются с одинаковым эффектом, предотвращается «дрожание» или неконтролируемый скролл.
  • Точные события: библиотека использует внутренние обработчики wheel, touchstart, touchmove, keydown, гарантируя консистентность.

Управление чувствительностью скролла

С помощью параметров можно регулировать, как быстро и с какой реакцией происходит нормализованный скролл:

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

Работа с горизонтальными и вложенными секциями

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

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

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

Отладка и настройка нормализованного поведения

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

  • fullpage_api.setAutoScrolling(true|false) – динамически включить или выключить автоматический скролл.

  • fullpage_api.setScrollingSpeed(ms) – изменить скорость анимации на лету.

  • События:

    • onLeave(origin, destination, direction) – вызывается перед сменой секции.
    • afterLoad(origin, destination, direction) – после завершения анимации.
    • afterRender – после инициализации fullPage.js.

Пример динамического изменения:

fullpage_api.setAutoScrolling(false);
document.querySelector('.toggleScroll').addEventListener('click', () => {
    fullpage_api.setAutoScrolling(true);
});

Совместимость с нативным скроллом

fullPage.js позволяет комбинировать нормализованный скролл с обычными полосами прокрутки, используя параметры:

  • scrollBar: true – включает нативный скролл, сохраняя плавные переходы.
  • autoScrolling: false – используется в режиме обычного скролла, но сохраняются возможности секций и событий.

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

Выводы по нормализации прокрутки

  • Библиотека обрабатывает все события скролла, обеспечивая одинаковую реакцию на десктопе и мобильных устройствах.
  • Настраиваются параметры чувствительности, скорость, кривые анимации и исключения для элементов с нативным скроллом.
  • Горизонтальные и вложенные секции требуют корректной настройки scrollHorizontally и методов управления событиями.
  • Можно динамически изменять поведение скролла через API fullPage.js, что даёт полный контроль над пользовательским опытом.

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

Оглавление