Mettere a fuoco sulla voce di elenco sulla freccia in giù premere

Question

Sto creando una casella di suggerimento automatica personalizzata Devo spostarmi sugli articoli li sulla freccia verso il basso.

quindi ho aggiunto l'attributo tabindex a li sta ottenendo lo stato attivo. ma il problema è che fa scorrere il div up con un'altezza casuale che esce dal li selezionato da div.

dopo tasto freccia giù:

e dopo qualche freccia verso il basso premere il tasto:

e dopo che va fuori schermo mentre il mouse verso il basso si comporta perfettamente.

Qui ho fatto un Demo JSFiddle prima di fare clic su item1 e quindi premere la freccia verso il basso che si comporta allo stesso modo.

Answer 1

Sviluppando il mio commento

Impostare del contenitore scrollTop-index of focused li * li height.

return false al keydown per impedire il normale scorrimento del browser del padre sorvolato.

$('div.container').on('focus', 'li', function() { 
    var $this = $(this); 
    $this.addClass('active').siblings().removeClass(); 
    $this.closest('div.container').scrollTop($this.index() * $this.outerHeight()); 
}).on('keydown', 'li', function(e) { 
    var $this = $(this); 
    if (e.keyCode === 40) {   
     $this.next().focus(); 
     return false; 
    } else if (e.keyCode === 38) {   
     $this.prev().focus(); 
     return false; 
    } 
}).find('li').first().focus(); 

jsfiddle http://jsfiddle.net/38zR3/42/

Answer 2

Aggiungere un .scrollTop() per assicurarsi che sia centrato o come lo si desidera.

Answer 3

Ho avuto un problema del genere una volta e risolto impostando lo stile CSS overflow del div contenente none o hidden in base alle proprie preferenze.

Answer 4

Hai provato a utilizzare l'ancora anziché il tabindex? per esempio

<li><a href="#"></li> 

Nella mia esperienza alcuni browser non in grado di gestire la messa a fuoco correttamente tabindex