alex_shevch
@alex_shevch
PM, Frontend Developer

Как запретить скролл страницы при нажатии стрелок вверх-вниз?

Всем привет!
Делаю поиск и хочу, чтобы результаты поиска можно было пролистать по клавишам вверх-вниз. Всё работает, но не могу заставить страницу не прокручиваться при этом.

Думал, что достаточно будет запретить всплытие, но не тут-то было.

upd: https://jsfiddle.net/8f1ev7qu/

Вот как всё происходит:
Вешаю хэндлеры на ссылки, по которым буду ходить.
links = FAST_RESULTS.querySelectorAll('.js-fast-result-link');
links.forEach(function (result) {
  result.addEventListener('keyup', _onFastResultKeyUp);
});

Сам хэндлер:
let _onFastResultKeyUp = function (evt) {
        // Эта строка добавлена по рекомендации из интернета, но ничем не помогает, как и простой evt.preventDefault()
        evt.preventDefault ? evt.preventDefault() : (evt.returnValue = false);
        evt.stopPropagation();
        if (evt.keyCode === DOWN_BTN) moveFocus('next');
        if (evt.keyCode === UP_BTN) moveFocus('previous');
    };

Функция смены фокуса:
let moveFocus = function(direction) {
        let focusedEl = document.activeElement;
        const currentIndex = Array.prototype.indexOf.call(links, focusedEl);

        const nextEl = direction === 'next'
            ? links[currentIndex + 1]
            : links[currentIndex - 1];

        const preventPreviousFocus = direction === 'previous' && currentIndex === 0;

        if (nextEl && !preventPreviousFocus){
            nextEl.focus();
        }
    };
  • Вопрос задан
  • 76 просмотров
Решения вопроса 1
joeberetta
@joeberetta Куратор тега JavaScript
Читай: https://epdf.pub/google-for-dummies.html
Я бы конечно переписал весь этот костыль, но это уже на ваше усмотрение
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы