Focus on list item on down arrow press

focus, html-lists, javascript, jquery

Solution

Elaborating on my comment

Set the container's `scrollTop` to `index of focused li` * `li height`.

`return false` upon keydown to prevent normal browser scrolling of overflown parent.

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

Problem

I am creating a custom auto suggest-box I need to move on `li` items on arrow down press. so I added tabindex attribute to li it is getting focus. but problem is that it scrolling the div up with some random height that it out the selected li from div. after arrow down key: and after some arrow-down key press: and after that it goes out of screen while mouse down behave perfectly. Here I made a Demo JSFiddle first click `item1` and then press arrow down it behaving same.

Original source