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

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

Включение поддержки мобильных жестов

По умолчанию fullPage.js распознаёт свайпы на мобильных устройствах. Управление этой функциональностью осуществляется через опцию:

new fullpage('#fullpage', {
    // Включение свайпов
    touchSensitivity: 15,   // Чувствительность к движению пальца
    normalScrollElements: '.scrollable', // Элементы с обычной прокруткой
});

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

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

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

new fullpage('#fullpage', {
    controlArrows: true,       // Показывать стрелки управления слайдами
    slidesNavigation: true,    // Индикаторы слайдов
    loopHorizontal: false,     // Запрет циклической прокрутки слайдов
    touchSensitivity: 20,
    continuousVertical: false
});
  • loopHorizontal влияет на возможность зациклить горизонтальные слайды.
  • continuousVertical позволяет бесшовно прокручивать вертикальные секции.

Управление событиями свайпов

FullPage.js предоставляет события, которые позволяют реагировать на свайпы:

  • onSlideLeave — вызывается при уходе с одного слайда на другой.
  • onLeave — срабатывает при переходе с одной секции на другую.
  • afterSlideLoad — выполняется после завершения анимации слайда.
  • afterLoad — выполняется после завершения анимации секции.

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

new fullpage('#fullpage', {
    onLeave: function(origin, destination, direction){
        if(direction === 'down'){
            console.log('Свайп вниз');
        } else if(direction === 'up'){
            console.log('Свайп вверх');
        }
    }
});
  • origin — объект исходной секции
  • destination — объект целевой секции
  • direction — направление свайпа ('up' или 'down')

Для горизонтальных свайпов используется аналогичный подход через onSlideLeave:

onSlideLeave: function(section, origin, destination, direction){
    if(direction === 'right'){
        console.log('Свайп вправо');
    } else if(direction === 'left'){
        console.log('Свайп влево');
    }
}

Исключение элементов с обычной прокруткой

На мобильных устройствах часто встречаются элементы с собственной прокруткой, например списки или текстовые блоки. Чтобы избежать конфликта свайпов fullPage.js с этими элементами, используется параметр normalScrollElements:

new fullpage('#fullpage', {
    normalScrollElements: '.scrollable, .another-scrollable',
    normalScrollElementTouchThreshold: 5
});
  • normalScrollElementTouchThreshold определяет, сколько пикселей должно пройти движение пальца, чтобы оно стало обычной прокруткой, а не свайпом fullPage.js.

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

Для точной работы свайпов на различных устройствах и браузерах применяются:

  • fitToSection — определяет автоматическую привязку к секции после свайпа.
  • fitToSectionDelay — задержка перед срабатыванием привязки.
  • scrollBar — при использовании нативного скролла свайпы обрабатываются корректнее на некоторых устройствах.

Пример:

new fullpage('#fullpage', {
    fitToSection: true,
    fitToSectionDelay: 100,
    scrollBar: false,
    touchSensitivity: 20
});
  • Установка fitToSectionDelay в 0 делает привязку моментальной, но на медленных устройствах может ощущаться резкий переход.

Оптимизация для разных платформ

  • На iOS иногда требуется увеличивать touchSensitivity для корректного распознавания свайпов.
  • На Android важно проверять взаимодействие с overflow: scroll внутри блоков, чтобы свайпы не конфликтовали с внутренней прокруткой.
  • Для планшетов стоит использовать более длинный жест для свайпа, чтобы избежать случайного переключения секций при прокрутке текста.

Практические советы

  1. Всегда тестировать свайпы на реальных устройствах.
  2. Комбинировать normalScrollElements и touchSensitivity для элементов с прокруткой.
  3. Использовать события onLeave и onSlideLeave для анимации или загрузки контента при свайпе.
  4. Для сложных интерфейсов с горизонтальными и вертикальными свайпами управлять настройками loopHorizontal и continuousVertical.
  5. Обеспечивать плавность анимации через css3: true и scrollingSpeed для мобильных устройств.

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

new fullpage('#fullpage', {
    scrollingSpeed: 700,
    fitToSection: true,
    fitToSectionDelay: 100,
    touchSensitivity: 20,
    continuousVertical: false,
    loopHorizontal: false,
    normalScrollElements: '.scrollable',
    onLeave: function(origin, destination, direction){
        console.log('Секция: ', origin.index, ' -> ', destination.index, ' Дирекция: ', direction);
    },
    onSlideLeave: function(section, origin, destination, direction){
        console.log('Слайд: ', origin.index, ' -> ', destination.index, ' Дирекция: ', direction);
    }
});

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

Оглавление