3

Situação

  • Tenho um navbar no meu site, e nele eu possuo diversos menus dropdown / megamenus.
  • Preciso que quando seja clicado neste dropdown, o usuário tenha a opção de "rolar" a página para cima e para baixo com as setas direcionais do teclado.
  • Com o scroll do mouse isto já funciona
  • Mas o teclado não... mesmo se setar o foco (utilizando o .focus() do jquery) em algum elemento que esteja fora do navbar.

JSFiddle está aqui, redimencionem a tela se o dropdown não aparecer.

Depois tente apertar para cima e para baixo no teclado, neste caso não irá funcionar (a tela não irá para baixo nem para cima)... só funciona com o scroll do mouse, e eu precisaria que isso funcionasse com o teclado também

3 Respostas 3

1

Daniel, aqui fica uma sugestão: http://jsfiddle.net/Lqdxf/

$('.navbar-collapse').keyup(fazerScroll);

function fazerScroll(event) {
    if (!$('.navbar-collapse').is(':visible')) return;
    var navBar = document.querySelector('.navbar-collapse');
    var scrollAtual = navBar.scrollTop;

    var incremento = event.keyCode == 40 ? 100 : event.keyCode == 38 ? -100 : 0;
    if (!incremento) return;
    $(navBar).stop().animate({
        scrollTop: scrollAtual + incremento
    }, 500);
}

Esse código chama a função fazerScroll() cada vez que uma tecla é pressada dentro da nav-bar. Quando a função abre verifica se o dropdown está visivel, senão pára. Depois mede a posicao atual to scroll e incrementa 100px no caso de a tecla carregada ser cima e -100px no caso de ser baixo. Antes de fazer a animacao para a posicao final, verifica se existe incremento para evitar correr a funcao .animate(). Note que usei o .stop() para permitir que o animate volte a correr noutra direcao caso carregue nas teclas rápido, senao ele ia acumular instrucoes e ter um comportamento extranho

0

Não sei se é isso que vc está precisando, mas vc pode criar um bind do evento keyup e verificar se o usuário pressionou as setas para cima ou para baixo e fazer a rolagem da tela:

$(document).keyup(function(event) {
  if(event.keyCode == 38) { // codigo da seta pra cima
    // faça a rolagem pra cima
  } else if(event.keyCode == 40) { //codigo da seta pra baixo
    // faça a rolagem pra baixo
  }
});

Para fazer a rolagem da tela para algum elemento você pode usar o método scrollTop do jquery:

$('html, body').animate({
    scrollTop: ($('seletor-do-elemento').offset().top)
},500);
1
  • Obrigado pela resposta, mas isto não seria bem o que estou precisando. O problema em si é o seguinte... Tente abrir o JSFiddle, e em seguida clique no menu dropdown, com ele aberto, tente apertar para cima e para baixo no teclado, neste caso, não irá funcionar (a tela não irá para baixo nem para cima)... só funciona com o scroll do mouse, e eu precisaria que isso funcionasse com o teclado também. 11/05/2014 às 17:54
0

Então pessoal, acabei encontrando uma resposta.

Clique aqui para ver o jsfiddle

Acabei captando o evento de onclick do menu.

Evito a propagação deste evento.

E controlo a abertura e o fechamento do menu na mão.

Para isto, eu tive que retirar o atributo data-toggle do menu.

Obrigado pela ajuda.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .