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

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

Активация мобильной поддержки

Для корректной работы на мобильных устройствах необходимо использовать параметр responsiveWidth или responsiveHeight. Эти опции позволяют автоматически отключать или модифицировать поведение fullPage.js при достижении заданных размеров экрана.

new fullpage('#fullpage', {
    responsiveWidth: 768, // отключает fullPage.js на устройствах с шириной <= 768px
    responsiveHeight: 600 // отключает fullPage.js на устройствах с высотой <= 600px
});

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

new fullpage('#fullpage', {
    touchSensitivity: 15 // уменьшает/увеличивает расстояние свайпа для смены секции
});

Сенсорные события и свайпы

fullPage.js использует стандартные события touchstart, touchmove и touchend для реализации свайпа между секциями. Основные параметры для управления сенсорной прокруткой:

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

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

Адаптивная прокрутка и отключение автопрокрутки

На мобильных устройствах стоит учитывать производительность и удобство взаимодействия. Параметр autoScrolling можно динамически включать или отключать:

if(window.innerWidth <= 768) {
    fullpage_api.setAutoScrolling(false); // отключает автоматическую прокрутку
} else {
    fullpage_api.setAutoScrolling(true);
}

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

Горизонтальные секции на мобильных устройствах

fullPage.js поддерживает горизонтальные секции через fp-slides. На мобильных устройствах горизонтальные свайпы часто конфликтуют с вертикальными. Параметр lockAnchors и корректная настройка свайпов позволяют избежать случайных переключений:

new fullpage('#fullpage', {
    lockAnchors: false, // позволяет использовать горизонтальные слайды
    controlArrows: false // отключает стрелки управления на мобильных
});

Важно также следить за адаптивной версткой горизонтальных секций, чтобы контент не выходил за пределы экрана.

Оптимизация производительности

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

  • Ограничивать количество DOM-элементов в каждой секции.
  • Использовать lazyLoad для изображений и тяжелого контента.
  • Минимизировать тяжелые CSS-анимации и сторонние скрипты в активных секциях.
new fullpage('#fullpage', {
    lazyLoading: true
});

Управление прокруткой внутри секций

Для блоков с внутренней прокруткой используется параметр scrollOverflow. На мобильных устройствах важно подключать библиотеку scrollOverflow (например, через scrollOverflow: true) для корректной работы прокрутки внутри секций:

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

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

События и коллбэки на мобильных устройствах

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

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

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

new fullpage('#fullpage', {
    onLeave: function(origin, destination, direction){
        if(window.innerWidth <= 768) {
            // отключаем анимацию для мобильных
        }
    }
});

Практические рекомендации

  1. Минимизировать сложные анимации на мобильных устройствах.
  2. Использовать адаптивные размеры и отключение секционной прокрутки для узких экранов.
  3. Подключать scrollOverflow для длинных блоков контента внутри секций.
  4. Настраивать touchSensitivity для оптимального восприятия свайпов.
  5. Контролировать горизонтальные секции и предотвращать конфликт с вертикальными свайпами.

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

Оглавление