Touch-события

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

Включение поддержки сенсорных устройств

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

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

Основные события для сенсорных устройств

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

  1. onLeave — срабатывает перед переключением между секциями, можно определить направление свайпа:
onLeave: function(origin, destination, direction){
    if(direction === 'down'){
        console.log('Свайп вниз');
    } else {
        console.log('Свайп вверх');
    }
}

  1. afterLoad — вызывается после завершения перехода, включая переход по свайпу. Позволяет запускать анимации или подгружать данные динамически.

  2. afterSlideLoad — событие для слайдов внутри секции, срабатывает после свайпа между горизонтальными слайдами.

Настройка горизонтальных свайпов

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

new fullpage('#fullpage', {
    controlArrows: true,
    slidesNavigation: true,
    loopHorizontal: false,
    onSlideLeave: function(section, origin, destination, direction){
        console.log('Слайд сменился, направление: ', direction);
    }
});
  • controlArrows — стрелки для горизонтальной навигации, могут быть скрыты на мобильных устройствах.
  • slidesNavigation — отображение навигационных точек для слайдов.
  • loopHorizontal — циклический переход между слайдами в пределах одной секции.

Программное управление свайпами

fullPage.js позволяет программно инициировать переход с помощью методов:

  • fullpage_api.moveSectionUp() — свайп вверх
  • fullpage_api.moveSectionDown() — свайп вниз
  • fullpage_api.moveSlideRight() — свайп вправо
  • fullpage_api.moveSlideLeft() — свайп влево

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

Ограничение свайпов на отдельных элементах

Чтобы предотвратить нежелательные свайпы на определённых блоках, можно использовать опцию normalScrollElements:

new fullpage('#fullpage', {
    normalScrollElements: '.modal, .map-container'
});

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

Особенности работы с мобильными браузерами

fullPage.js корректно обрабатывает:

  • Многопальцевые жесты (игнорируются при стандартной настройке)
  • Эластичность свайпа на iOS, где свайп может быть прерван системным скроллом
  • Автоподстраивание секций под высоту экрана устройства (fitToSection: true)

Кастомизация свайпов

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

  • Свайп только в определённых направлениях
  • Ограничение переходов на последней или первой секции
  • Динамическое изменение скорости анимации при быстром свайпе

Пример динамического управления чувствительностью:

fullpage_api.setAllowScrolling(true, 'down');
fullpage_api.setKeyboardScrolling(false);

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

Оглавление