Метод setAllowScrolling

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

Синтаксис

fullpage_api.setAllowScrolling(value, directions);

Параметры:

  • value (Boolean) – логическое значение:

    • true — разрешает прокрутку;
    • false — запрещает прокрутку.

  • directions (String | Array, опционально) – определяет направления, в которых будет разрешён или запрещён скроллинг. Возможные значения:

    • 'up' — вертикальная прокрутка вверх;
    • 'down' — вертикальная прокрутка вниз;
    • 'left' — горизонтальная прокрутка влево;
    • 'right' — горизонтальная прокрутка вправо;
    • ['up', 'down'] или ['left', 'right'] — массив направлений для точечной настройки.

Если параметр directions не указан, действие применяется ко всем направлениям прокрутки.

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

  1. Полное отключение скроллинга на странице
fullpage_api.setAllowScrolling(false);

После вызова этого метода ни вертикальный, ни горизонтальный скроллинг не будут работать до повторного разрешения.

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

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

  1. Ограничение горизонтального скроллинга
fullpage_api.setAllowScrolling(false, ['left', 'right']);

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

  1. Временное отключение скроллинга для анимаций
// Отключаем скроллинг на 3 секунды
fullpage_api.setAllowScrolling(false);

setTimeout(() => {
  fullpage_api.setAllowScrolling(true);
}, 3000);

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

Особенности и нюансы

  • Метод влияет на физическую прокрутку мышью, клавишами и тач-свайпами.
  • В комбинации с другими методами fullPage.js, такими как setKeyboardScrolling или setFitToSection, необходимо учитывать порядок вызовов, чтобы избежать конфликта поведения.
  • Если в directions указано направление, которое невозможно применить (например, горизонтальные направления при отсутствии горизонтальных слайдов), метод проигнорирует это направление, не вызывая ошибок.
  • Использование setAllowScrolling(false) не удаляет события scroll, а лишь блокирует их обработку библиотекой. Это важно для случаев интеграции с кастомными скриптами или сторонними плагинами.

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

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

fullpage_api.setAllowScrolling(false, ['up', 'down']);

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

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

  • Для создания модальных окон или полноэкранных форм рекомендуется временно блокировать скроллинг с помощью setAllowScrolling(false) и восстанавливать после закрытия окна.
  • Для динамических интерфейсов с анимациями или переходами между разделами полезно комбинировать с setKeyboardScrolling(false) и setAutoScrolling(false) для полного контроля над поведением пользователя.
  • При реализации каруселей или горизонтальных слайдов следует точно указывать направления, чтобы не нарушить естественную вертикальную прокрутку страницы.

Метод setAllowScrolling предоставляет гибкий инструмент для управления пользовательским взаимодействием с прокруткой и является важным элементом для тонкой настройки интерфейсов на основе fullPage.js.

Оглавление