Skoncentruj się na pozycji listy na naciśniętej strzałce naciśnij

Question

Tworzę niestandardowe auto-propozycję-pole, które muszę przenieść na li przedmiotów po naciśnięciu strzałki.

więc dodałem atrybut tabindex do li, który uzyskuje ostrość. ale problem polega na tym, że przewijanie div z pewną losową wysokością, że to out wybrany li z div.

po strzałka w dół klucz:

i po pewnym strzałki w dół naciśnięciu przycisku:

, po czym wychodzi z ekranu, a mysz w dół zachowuje się idealnie.

Tutaj zrobiłem Demo JSFiddle kliknij najpierw item1, a następnie naciśnij strzałkę w dół zachowując się tak samo.

Answer 1

Opracowanie na mój komentarz

Ustaw pojemnik na scrollTop do index of focused li * li height.

return false po naciśnięciu klawisza, aby uniemożliwić normalne przewijanie przeglądarki nadmiarowanego elementu nadrzędnego.

$('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

Dodaj .scrollTop(), aby upewnić się, że jest wyśrodkowany lub jak chcesz.

Answer 3

Miałem kiedyś taki problem i rozwiązałem go, ustawiając styl CSS overflow elementu div zawierającego none lub hidden w zależności od Twoich preferencji.

Answer 4

Czy próbowałeś użyć zakotwiczenia zamiast tabindex? np

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

Z mojego doświadczenia niektóre przeglądarki nie obsługują ostrość na TabIndex poprawnie