Блокировка прокрутки

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

Блокировка прокрутки может быть необходима в следующих случаях:

  • предотвращение скролла в определённых секциях;
  • временное отключение навигации при анимациях или загрузке контента;
  • управление доступом к слайдам внутри секций.

В fullPage.js предусмотрены встроенные методы для управления скроллингом, которые позволяют гибко включать или отключать прокрутку.

Методы для блокировки прокрутки

fullpage_api.setAllowScrolling(false)

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

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

// Полная блокировка прокрутки
fullpage_api.setAllowScrolling(false);

// Разрешение прокрутки только по вертикали
fullpage_api.setAllowScrolling(true, 'up, down');

// Разрешение прокрутки только по горизонтали (слайды)
fullpage_api.setAllowScrolling(true, 'left, right');

Аргументы метода:

  • Boolean — true для разрешения прокрутки, false для блокировки;
  • String (опционально) — указывает направление, в котором прокрутка разрешена (up, down, left, right).

fullpage_api.setKeyboardScrolling(false)

Метод блокирует навигацию с помощью клавиатуры, включая стрелки, Page Up/Down и пробел. Особенно полезно при использовании кастомных интерактивных элементов, где клавиатура управляет внутренней логикой.

// Отключение клавиатурной навигации
fullpage_api.setKeyboardScrolling(false);

// Включение клавиатурной навигации
fullpage_api.setKeyboardScrolling(true);

Можно указать направление аналогично setAllowScrolling:

fullpage_api.setKeyboardScrolling(true, 'up, down');

fullpage_api.setRecordHistory(false)

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

fullpage_api.setRecordHistory(false);

Ограничение скролла на отдельных секциях

Для блокировки прокрутки только на определённых секциях используется сочетание событий и методов библиотеки. Основное событие — onLeave:

new fullpage('#fullpage', {
  onLeave: function(origin, destination, direction){
    if(origin.index === 2){ // Вторая секция
      fullpage_api.setAllowScrolling(false); // Блокировка прокрутки
    } else {
      fullpage_api.setAllowScrolling(true);
    }
  }
});

Это позволяет динамически включать и отключать прокрутку в зависимости от позиции пользователя на странице.

Блокировка прокрутки внутри модальных окон

Часто требуется отключать прокрутку страницы, когда открыт модальный элемент. Для этого можно использовать комбинацию setAllowScrolling и setKeyboardScrolling:

// При открытии модального окна
fullpage_api.setAllowScrolling(false);
fullpage_api.setKeyboardScrolling(false);

// При закрытии модального окна
fullpage_api.setAllowScrolling(true);
fullpage_api.setKeyboardScrolling(true);

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

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

На мобильных устройствах часто нужно различать поведение touch-событий. В fullPage.js это делается через настройку touchSensitivity и методы блокировки:

new fullpage('#fullpage', {
  touchSensitivity: 15,
  normalScrollElements: '#scrollable-div' // Элементы с обычной прокруткой
});

// Дополнительно блокировка тача
fullpage_api.setAllowScrolling(false, 'up, down');

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

Использование блокировки вместе с авто-слайдерами

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

fullpage_api.setAllowScrolling(false, 'up, down'); // Блокируем вертикаль
fullpage_api.setAllowScrolling(true, 'left, right'); // Разрешаем горизонталь

Это предотвращает конфликт между вертикальной прокруткой страницы и горизонтальной навигацией внутри слайдера.

События, влияющие на скролл

  1. afterLoad — позволяет включать или отключать скролл после полной загрузки секции.
  2. onLeave — идеально для блокировки скролла при выходе из определённой секции.
  3. afterRender — может использоваться для глобальной инициализации блокировок на странице.

Рекомендации по использованию

  • Использовать блокировку только там, где она действительно необходима, чтобы не ухудшать пользовательский опыт.
  • Комбинировать setAllowScrolling и setKeyboardScrolling для полной защиты от случайной навигации.
  • Для мобильных устройств предусматривать разрешённую прокрутку внутри элементов с normalScrollElements.
  • Динамически включать и отключать скролл через события onLeave и afterLoad для гибкого управления.

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

Оглавление