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

Question

[Zashamee]

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

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

Answer 1

[Александр Талалаев]

Вам нужно следить за событиями keydown, далее снимаем действие по умолчанию с помощью preventDefault.
Таким образом в самом общем случае отключения реакции на все кнопки будет:

document.addEventListener('keydown', e => {
  e.preventDefault();
  return false;
});

Далее ищите нужные коды для своих кнопок, отключаете поведение по умлочанию, добавляете своё поведение.
Например:

document.addEventListener('keydown', e => {
   if (e.key === 'ArrowDown') {
    e.preventDefault();
    //Ваша логика
    return false;
  }
});