Liste öğesinde aşağıya odaklanın Ok tuşuna basın

Question

Özel bir otomatik öneri kutusu oluşturuyorum li öğeyi aşağı ok tuşuna basmaya ihtiyacım var.

bu yüzden sekmeye odaklandığım için tabindex özniteliğini ekledim. ama problem, div'u rasgele bir yükseklikle yukarı kaydırıp, seçilen li'den div'dan çıkmasıdır.

aşağı tuşu ok sonra:

:

ve bazı ok aşağı tuşa basıldıktan sonra

10 ve daha sonra fare aşağı doğru hareket ederken ekran biter.

Burada bir Demo JSFiddle 'u ilk olarak item1'a tıkladıktan sonra aşağı doğru ok tuşlarına basıyorum.

Answer 1

konteyner en scrollTop-index of focused li * li height Set benim yorumum

gerekçe olarak tabindex odaklanmayı işleyemez. Taşan üst öğenin normal tarayıcısını kaydırmasını önlemek için anahtarın üzerine

return false.

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

Merkeze ya da nasıl olmasını istediğinize emin olmak için .scrollTop() ekleyin.

Answer 3

Bir keresinde böyle bir sorunla karşılaştım ve CSS stilini overflow içeren divun none veya hidden tercihinize göre ayarlayarak çözdüm.

Answer 4

Tabindex yerine anchor kullanmayı denediniz mi? örneğin Tecrübelerime göre

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

bazı tarayıcılar doğru