Навигация с клавиатуры

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

Включение и настройка клавиатурной навигации

По умолчанию в fullPage.js клавиатурная навигация активирована. Управление осуществляется через объект конфигурации при инициализации плагина:

new fullpage('#fullpage', {
    keyboardScrolling: true, // включает прокрутку с клавиатуры
    animateAnchor: true,     // анимация при переходе по якорям
    recordHistory: true      // запись истории в браузер
});

Ключевые параметры:

  • keyboardScrolling — булевое значение, отвечает за включение или отключение навигации через клавиши.
  • animateAnchor — при переходе по якорям клавиши будут использовать анимацию, если значение true.
  • recordHistory — позволяет сохранять навигацию в истории браузера, что важно для кнопок “Назад” и “Вперед”.

Основные клавиши для навигации

fullPage.js использует стандартные клавиши для вертикального и горизонтального перемещения:

  • Стрелка вверх (↑) — переход на предыдущую секцию.
  • Стрелка вниз (↓) — переход на следующую секцию.
  • Стрелка влево (←) — переход на предыдущий слайд в горизонтальной секции.
  • Стрелка вправо (→) — переход на следующий слайд.
  • Page Up / Page Down — альтернативные клавиши для вертикальной навигации.
  • Home / End — переход к первой или последней секции.

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

Управление клавишами через API

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

fullpage_api.setKeyboardScrolling(false);

Чтобы снова включить:

fullpage_api.setKeyboardScrolling(true);

Также можно отключить прокрутку только по вертикали или по горизонтали, передавая два аргумента:

fullpage_api.setKeyboardScrolling(true, 'down'); // включить только вертикальную прокрутку вниз
fullpage_api.setKeyboardScrolling(false, 'up');  // отключить прокрутку вверх

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

Пользовательские обработчики клавиш

fullPage.js позволяет добавить собственные функции для клавиш через событие onKeyDown:

document.addEventListener('keydown', function(event) {
    if(event.key === 'Enter'){
        console.log('Нажата клавиша Enter');
    }
});

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

fullpage_api.setKeyboardScrolling(false);
// Выполняем кастомные действия
fullpage_api.setKeyboardScrolling(true);

Адаптивное поведение клавиатурной навигации

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

new fullpage('#fullpage', {
    keyboardScrolling: window.innerWidth > 768
});

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

Советы по улучшению UX с клавиатурой

  1. Фокусировка интерактивных элементов: перед переходом между секциями полезно установить фокус на ключевые элементы (кнопки, поля ввода), чтобы клавиши не вызывали неожиданный скролл.
  2. Поддержка модальных окон: при открытии модального окна лучше временно отключить клавиатурную навигацию, чтобы стрелки управляли содержимым окна, а не прокруткой страниц.
  3. Отзывчивость на shift и ctrl: для расширенного управления можно использовать комбинации клавиш, обрабатывая их через события keydown.

Заключение по функционалу клавиатуры

Навигация с клавиатуры в fullPage.js — это гибкий и мощный инструмент, позволяющий создавать полностью интерактивные и доступные интерфейсы. Управление может быть как стандартным, с использованием стрелок и Page Up/Down, так и расширенным, через API и пользовательские обработчики событий, с возможностью адаптации под разные устройства и сценарии взаимодействия.

Оглавление