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

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

Детекция устройства и отключение fullPage.js

FullPage.js предоставляет встроенную опцию responsiveWidth и responsiveHeight, которые позволяют автоматически деактивировать плагин, если ширина или высота окна меньше заданного значения.

new fullpage('#fullpage', {
    autoScrolling: true,
    scrollHorizontally: true,
    responsiveWidth: 768,  // отключение при ширине экрана ≤ 768px
    responsiveHeight: 600  // отключение при высоте экрана ≤ 600px
});

Пояснения по параметрам:

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

Отключение с помощью метода destroy

Для более гибкой настройки можно использовать метод fullpage_api.destroy('all'), который полностью отключает функционал fullPage.js, включая навигацию, точки прокрутки и обработку событий.

Пример:

function checkDevice() {
    if (window.innerWidth < 768) {
        if (typeof fullpage_api !== 'undefined') {
            fullpage_api.destroy('all');
        }
    } else {
        new fullpage('#fullpage', {
            autoScrolling: true,
            navigation: true
        });
    }
}

window.addEventListener('resize', checkDevice);
window.addEventListener('load', checkDevice);

Пояснение логики:

  1. Проверяется ширина окна через window.innerWidth.
  2. Если ширина меньше 768 пикселей, fullPage.js уничтожается.
  3. При увеличении ширины выше порогового значения создаётся новая инициализация плагина.
  4. Обработчики resize и load обеспечивают динамическую реакцию на изменение размера экрана и начальную инициализацию.

Сочетание CSS и JS для адаптивного поведения

Для улучшения визуальной адаптации полезно комбинировать JavaScript с CSS медиа-запросами. Пример:

@media screen and (max-width: 768px) {
    #fullpage .section {
        height: auto !important;
        overflow: visible !important;
    }
}
  • height: auto позволяет секциям подстраиваться под контент.
  • overflow: visible обеспечивает нормальный скролл на мобильных устройствах после отключения fullPage.js.
  • Такой подход предотвращает «обрезание» контента и делает интерфейс естественным для сенсорного управления.

Использование responsiveSlides для гибридных решений

В новых версиях fullPage.js доступна опция responsiveSlides, которая позволяет отключать вертикальный скролл, но сохранять горизонтальные слайдеры внутри секций:

new fullpage('#fullpage', {
    autoScrolling: true,
    scrollHorizontally: true,
    responsiveSlides: true
});

Преимущества:

  • Полезно, если хочется оставить интерактивные слайдеры на мобильных устройствах.
  • Вертикальная прокрутка возвращается к стандартному поведению, что улучшает UX на маленьких экранах.

Советы по оптимизации

  1. Минимизировать перезапуск fullPage.js при изменении ориентации устройства, чтобы не возникало мерцания секций.
  2. Хранить состояние инициализации в переменной, чтобы избежать повторного создания экземпляра fullPage.js.
  3. Комбинировать responsiveWidth с destroy, если необходимо полностью отключить функционал на малых экранах и при этом оставить обычный скролл.
  4. Тестировать на реальных устройствах, так как эмуляторы могут показывать некорректное поведение сенсорного скролла.

Практический пример

let fullpageInstance;

function initFullpage() {
    fullpageInstance = new fullpage('#fullpage', {
        autoScrolling: true,
        navigation: true,
        responsiveWidth: 768
    });
}

function handleResize() {
    if (window.innerWidth < 768) {
        if (fullpageInstance) {
            fullpageInstance.destroy('all');
            fullpageInstance = null;
        }
    } else if (!fullpageInstance) {
        initFullpage();
    }
}

window.addEventListener('resize', handleResize);
window.addEventListener('load', handleResize);
  • Переменная fullpageInstance позволяет контролировать состояние плагина.
  • Динамическое включение и отключение fullPage.js предотвращает дублирование и ошибки при ресайзе.
  • Такой подход обеспечивает плавный и адаптивный пользовательский интерфейс на всех устройствах.
Оглавление