How do I keep a selected LI visible (not hidden)?

Question

I'm using jQuery 1.12. I have a styled UL with LI elements. I use the below code to select these elements using the up or down arrows on the keyboard when the DIV has focus ...

 $(".select").bind('keydown', function(event) {
    var currentElement = $(this).find(".select-options li.selected");
    if (currentElement.length == 0) {
        currentElement = $(this).find(".select-options li")[0];
      $(currentElement).addClass("selected");
      return;
    }       // if
    var nextElement;
    switch(event.keyCode){
    // case up
    case 38:
        nextElement = $(this).find(".select-options li")[($(this).find(".select-options li").index(currentElement) - 1) % $(this).find(".select-options li").length];
        break;
    case 40:
        nextElement = $(this).find(".select-options li")[($(this).find(".select-options li").index(currentElement) + 1) % $(this).find(".select-options li").length];
      break;
    }
    $(this).find(".select-options li").removeClass("selected");
    if(nextElement !== null) {
        $(nextElement).addClass("selected");
    }
 });

The problem is, if you continually click the down key (for example), eventually you won't be able to see the selected item. How do I adjust things so that the selected item is always visible? The Fiddle illustrating the problem is here -- http://jsfiddle.net/sge8g5qu/1/ .

Answer 1

At the end where you add the class to the nextElement call .scrollIntoView( false ) on it as well.

if(nextElement !== null) {
    $(nextElement).addClass("selected");
    nextElement.scrollIntoView(false); // added this line
}

Updated fiddle: http://jsfiddle.net/gaby/6fjnnu55/

Answer 2

You can use, .offset() to find the top offset of your select box and of the the selected element.

You can then use .scrollTop to set it, try something like:

var yourSelectInput = $('.select');

var nextElementTop = $(nextElement).offset().top;  // get offset of element
var selectTop = yourSelectInput.offset().top;  // get offset of select input

// set the scrollTop to the scroll input offset
// plus the difference of the option top offset
yourSelectInput.scrollTop(yourSelectInput.scrollTop() + (nextElementTop - selectTop));