Как отключить скролл страници при фокусе определенного элемента?

Question

Как отключить скролл страници при фокусе определенного элемента?

Рейтинг: 0Ответов: 1Опубликовано: 18.07.2023

Делаю search- bar на сайте. Одно из требований ТЗ - это чтобы можно было менять фокус элементов списка на стрелочки(на клавиатуре). Когда я нажимаю на стрелочки у меня сколлится страница. Подскажите, как отключить скролл, пока пока активен search- bar?

P.S. Вариант с overflow: 'hidden' - мне не подходит

javascript

Источник: Stack Overflow на русском

Answer 1

▲ 1Принят

Вообще, ответ на этот вопрос есть уже давно: https://stackoverflow.com/a/4770179

Суть в том, что можно блокировать событие keydown, если нажата одна из стрелок, и тогда страницу нельзя будет скроллить на стрелочки:

const handlerToDisableScroll = e => {
    if(e.keyCode === 38 || e.keyCode === 40) {
        e.preventDefault();
    }
}

const disableScroll = () => document.addEventListener("keydown", handlerToDisableScroll, false);
const enableScroll =  () => document.removeEventListener("keydown", handlerToDisableScroll);

Аналогично, если нужно полностью отключить скролл:

const handlerToDisableScroll = e => {
    // Блокируется не только стрелка вверх/вниз, но и пробел
    if(e.keyCode === 38 || e.keyCode === 40 || e.keyCode === 32) {
        e.preventDefault();
    }
}

const preventDefault = e => e.preventDefault();

const disableScroll = () => {
    document.addEventListener("keydown", handlerToDisableScroll);
    document.addEventListener("wheel", preventDefault, { passive: false }); // без passive будет ошибка
}

const enableScroll = () => {
    document.removeEventListener("keydown", handlerToDisableScroll);
    document.removeEventListener("wheel", preventDefault);
}

Как отключить скролл страници при фокусе определенного элемента?

Ответы