Распространенные ошибки

Некорректная инициализация плагина

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

  • Подключение скриптов в неверном порядке: сначала должен быть подключен jQuery (если используется версия fullPage.js до 4.0), затем сам fullPage.js, а после этого вызывается new fullpage(...) или $('#fullpage').fullpage(...).
  • Инициализация до загрузки DOM: если скрипт вызывается до того, как DOM полностью сформирован, fullPage.js не сможет найти контейнер секций и выдает ошибки. Для решения используется событие DOMContentLoaded или размещение скрипта в конце body.

Пример правильной инициализации:

document.addEventListener('DOMContentLoaded', function() {
    new fullpage('#fullpage', {
        autoScrolling: true,
        navigation: true,
        scrollBar: false
    });
});

Конфликт с CSS и неверная структура HTML

fullPage.js строго требует определённой структуры DOM: контейнер с id="fullpage" и дочерние элементы с классом section. Нарушение структуры приводит к некорректной работе прокрутки:

<div id="fullpage">
    <div class="section">Секция 1</div>
    <div class="section">Секция 2</div>
</div>

Ошибки:

  • Использование вложенных блоков .section внутри .section без применения .slide для горизонтальных слайдов.
  • Несовпадение высот секций с требованиями fullPage.js, например, использование height: auto на родительских контейнерах, что нарушает авто-прокрутку.

Конфликт с другими библиотеками скролла

Одновременное использование сторонних плагинов скролла, таких как ScrollMagic, Locomotive Scroll или кастомных обработчиков wheel, часто вызывает непредсказуемое поведение. fullPage.js перехватывает события скролла для управления секциями, поэтому важно:

  • Отключать сторонние скрипты на страницах с fullPage.js.
  • Использовать опцию scrollBar: true, если нужен стандартный скролл вместе с fullPage.js.

Ошибки при работе с responsive и мобильными устройствами

  • Не настройка responsiveWidth и responsiveHeight приводит к ломке верстки на маленьких экранах. Эти опции позволяют отключать fullPage.js при ширине или высоте экрана ниже заданного порога:
new fullpage('#fullpage', {
    responsiveWidth: 768,
    responsiveHeight: 600
});
  • Использование фиксированных размеров секций (px) вместо относительных (vh) снижает адаптивность.

Проблемы с lazy load и динамическим контентом

fullPage.js требует, чтобы все секции были на странице в момент инициализации. Попытка добавить динамический контент через AJAX или Vue/React компоненты без пересчета через fullpage_api.reBuild() вызывает ошибки прокрутки и некорректное позиционирование.

// После добавления новых секций
fullpage_api.reBuild();

Неправильное использование опций

  • scrollingSpeed слишком мала: быстрый скролл может визуально «перескакивать» секции. Оптимально задавать значения от 400 до 1000.
  • fitToSection: false без причины: отключение авто-позиционирования может сломать плавность прокрутки.
  • Ошибки при использовании anchors: дублирование идентификаторов приводит к сбоям навигации и некорректным URL.

Игнорирование событий и коллбеков

fullPage.js предоставляет множество событий: afterLoad, onLeave, afterRender. Часто ошибки появляются, когда разработчик:

  • Не проверяет существование section или slide перед обращением к ним внутри коллбеков.
  • Изменяет DOM напрямую без вызова fullpage_api.reBuild(), что приводит к рассинхронизации.

Пример безопасного использования afterLoad:

new fullpage('#fullpage', {
    afterLoad: function(origin, destination, direction){
        if(destination.index === 2){
            // действия для третьей секции
        }
    }
});

Проблемы с анимациями и переходами

fullPage.js не запрещает CSS-анимации, но:

  • Использование transition: all с долгим временем на родительских блоках может конфликтовать с внутренней анимацией прокрутки.
  • Попытка включить одновременно scrollBar: true и сложные анимации через JS может вызвать рывки.

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

Оглавление