Reveal hidden items when using up/down arrow on Ul reaches top/bottom of an overflow auto item

Question

I have a ul that I am scrolling up and down on. The ul has overflow:auto on it, so after a certain point the selected item is no longer visible. You can see an example of the problem at this link: http://jsfiddle.net/NjC58/34/

Currently I have the following code, borrowed largely from this post:

var displayBoxIndex = -1;
var Navigate = function (diff) {
    displayBoxIndex += diff;
    var oBoxCollection = $("#leftDrop li");
    if (displayBoxIndex >= oBoxCollection.length) {
        displayBoxIndex = 0;
    }
    if (displayBoxIndex < 0) {
        displayBoxIndex = oBoxCollection.length - 1;
    }
    var cssClass = "selectedInitialNav";
    oBoxCollection.removeClass(cssClass).eq(displayBoxIndex).addClass(cssClass);
}

$(document).keydown(function(e){ // 38-up, 40-down
    if (e.keyCode == 40) { 
        Navigate(1);

        return false;
    }
    if (e.keyCode == 38) { 
        Navigate(-1);

        return false;
    }
});

Thus, I am looking for a solution that will scroll the overflow to the top if you are pressing down arrow and get to the bottom of the visible ul, and if you are pressing up arrow and get to the top of the visible ul will scroll overflow down so that the selected li is at the bottom of the visible ul.

I have been looking for solutions using jQuery's scroll function, using this post, and this post (which mentions scrollTop), but haven't actually found anything close to a solution yet.

Answer 1

One method you could try is by creating a function which handles the scrolling. It sets the scrollTop position of each item.

ScrollUl function

function scrollUl(){
    if(window.event.keyCode == 40){
        document.getElementById("parent").scrollTop = scrolLength;
        scrolLength = scrolLength + 19;  
    }           
    else if(window.event.keyCode == 38){            
        scrolLength = scrolLength - 19;  
        document.getElementById("parent").scrollTop = scrolLength;

    }
}

Then you should call the function within your Navigate function and you should ad an id to your ul like: <ul id="parent">

JSFiddle Demo

This code still needs some improvements but it might help you getting your way.