Управление с клавиатуры

Smooth Scroll — библиотека для плавной прокрутки страниц на JavaScript, изначально ориентированная на навигацию с помощью ссылок и скроллинг мышью. Однако интеграция управления с клавиатуры позволяет создавать более доступный и удобный интерфейс, особенно для пользователей, которые предпочитают клавиатурные сокращения или используют экранные читалки.

Основные события клавиатуры

В JavaScript для отслеживания нажатий клавиш применяются события keydown, keyup и keypress. Для управления прокруткой чаще всего используется keydown, так как оно срабатывает в момент нажатия клавиши и позволяет предотвратить стандартное поведение браузера с помощью event.preventDefault().

document.addEventListener('keydown', function(event) {
    switch(event.key) {
        case 'ArrowUp':
            // действия для прокрутки вверх
            break;
        case 'ArrowDown':
            // действия для прокрутки вниз
            break;
        case 'PageUp':
            // прокрутка на одну страницу вверх
            break;
        case 'PageDown':
            // прокрутка на одну страницу вниз
            break;
    }
});

Ключевые моменты:

ArrowUp и ArrowDown — стандартные клавиши для вертикального скроллинга.
PageUp и PageDown — позволяют прокручивать контент на высоту видимой области.
event.preventDefault() блокирует стандартный скролл браузера и позволяет полностью контролировать анимацию.

Настройка Smooth Scroll для клавиатуры

Smooth Scroll предоставляет метод animateScroll.scrollTo() для программного управления прокруткой. Для клавиатуры необходимо определить величину смещения и продолжительность анимации.

const scroll = new SmoothScroll();

document.addEventListener('keydown', function(event) {
    let distance = 100; // количество пикселей для прокрутки
    switch(event.key) {
        case 'ArrowUp':
            scroll.animateScroll(window.pageYOffset - distance);
            event.preventDefault();
            break;
        case 'ArrowDown':
            scroll.animateScroll(window.pageYOffset + distance);
            event.preventDefault();
            break;
    }
});

Особенности:

window.pageYOffset возвращает текущую позицию прокрутки.
animateScroll() принимает координату, до которой должна прокрутиться страница.
Плавность анимации задается в настройках Smooth Scroll при инициализации.

Горизонтальная прокрутка с клавиатуры

Smooth Scroll может работать не только по вертикали. Для горизонтального скроллинга используются свойства scrollLeft и метод animateScroll.scrollTo() с указанием горизонтальной позиции.

document.addEventListener('keydown', function(event) {
    let distance = 100;
    if(event.key === 'ArrowLeft') {
        scroll.animateScroll(window.pageXOffset - distance);
        event.preventDefault();
    }
    if(event.key === 'ArrowRight') {
        scroll.animateScroll(window.pageXOffset + distance);
        event.preventDefault();
    }
});

Примечание: Для элементов с горизонтальным скроллом можно использовать element.scrollLeft вместо window.pageXOffset.

Управление прокруткой по секциям

Для сайтов с лендингами и одностраничными интерфейсами полезно реализовать переход по секциям с клавиатуры. Smooth Scroll позволяет прокручивать к конкретным якорям.

const scroll = new SmoothScroll();
const sections = document.querySelectorAll('section');
let currentIndex = 0;

document.addEventListener('keydown', function(event) {
    if(event.key === 'ArrowDown') {
        if(currentIndex < sections.length - 1) currentIndex++;
        scroll.animateScroll(sections[currentIndex]);
        event.preventDefault();
    }
    if(event.key === 'ArrowUp') {
        if(currentIndex > 0) currentIndex--;
        scroll.animateScroll(sections[currentIndex]);
        event.preventDefault();
    }
});

Особенности реализации:

currentIndex отслеживает текущую видимую секцию.
Используется массив секций для динамической прокрутки.
Позволяет синхронизировать клавиатуру с визуальной навигацией.

Адаптивные настройки скорости и длительности

Smooth Scroll поддерживает конфигурацию скорости и длительности анимации. Для клавиатуры важно выбирать более короткую длительность, чтобы реакция на нажатие клавиш была мгновенной, но при этом сохранялась плавность.

const scroll = new SmoothScroll({
    speed: 500,        // время анимации в миллисекундах
    offset: 0,         // смещение от верхней границы
    easing: 'easeInOutCubic' // функция плавности
});

Значение speed между 200–600 мс обеспечивает комфортное управление.
offset позволяет компенсировать фиксированные элементы, например шапку.
Функции плавности (easing) обеспечивают естественный вид движения.

Обработка одновременных клавиш

Для более сложных интерфейсов можно отслеживать сочетания клавиш, например Shift + ArrowDown для ускоренной прокрутки.

document.addEventListener('keydown', function(event) {
    let distance = event.shiftKey ? 300 : 100;
    if(event.key === 'ArrowDown') {
        scroll.animateScroll(window.pageYOffset + distance);
        event.preventDefault();
    }
    if(event.key === 'ArrowUp') {
        scroll.animateScroll(window.pageYOffset - distance);
        event.preventDefault();
    }
});

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

Пользователь может менять скорость скроллинга без дополнительных кнопок.
Поддержка модификаторов (Shift, Ctrl, Alt) расширяет возможности интерфейса.

Интеграция с фокусом элементов

Smooth Scroll с клавиатурой особенно полезен при навигации через элементы с tabindex. Прокрутка к текущему элементу с фокусом обеспечивает видимость активного блока.

document.addEventListener('focusin', function(event) {
    if(event.target.tabIndex >= 0) {
        scroll.animateScroll(event.target);
    }
});

Автоматическая прокрутка к элементу с фокусом повышает доступность.
Работает для форм, кнопок и интерактивных блоков.