Como desativar a rolagem de páginas em FF com teclas de seta

Question

Estou construindo um menu com tópicos e itens. Cada tópico pode ser expandido e colapso clicando nele. Minha tarefa é possibilitar passar pelos tópicos e itens do menu com as teclas de seta para cima e para baixo. Eu já fiz isso, mas o problema é que, quando a página é maior que a janela, a página está rolando ao pressionar as teclas de seta. Eu tentei usar:

document.body.style.overflow = "hidden";

Para impedir que a página role. Assim, quando clico no 'tópico2', por exemplo, posso continuar usando as teclas de seta para ir para o próximo tópico/item. Depois disso, se eu clicar em qualquer outro lugar na tela, defina o transbordamento de volta para o automóvel e a página poderá ser rolada novamente.

Isso funciona no IE, mas não no FF. Em FF, as barras de rolagem estão sendo removidas e a roda do mouse não rola a página, mas as teclas de seta ainda o fazem. Portanto, minha pergunta é como consertar isso, ou melhor, como não rolar a página quando o foco está em qualquer elemento do menu? Portanto, não usarei a propriedade Overflow.

Answer 1

Você deve vincular um evento KeyDown ao documento e, se o código de chave do evento corresponder a alguma das teclas de seta (37 a 40), retorne false. Dessa forma, a prensa de seta não vai mais longe.

document.onkeydown = function(e) {
    var k = e.keyCode;
    if(k >= 37 && k <= 40) {
        return false;
    }
}

Você pode expandir facilmente isso para funcionar apenas quando seu menu estiver ativo, mas sem ver parte do código, é impossível dar um exemplo.

Answer 2

Abaixo o código resolveu o problema

$(window).scroll(function () { 
  window.scrollTo(0,0);
});

Answer 3

A única maneira de ver é interceptar o keydown Evento e fazer o embaçamento/focar a si mesmo.

Parece haver alguns pegadinhos em pegar essas chaves, veja essa questão Para vários exemplos (baseados em jQuery) que parecem bastante promissores.