My issue involves scrolling a ul up and down. The ul has overflow:auto applied, causing the selected item to be hidden after reaching a certain point. To see an example of the problem, visit this link: http://jsfiddle.net/NjC58/34/
The code I am currently using is mostly borrowed from this source:
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;
}
});
I am seeking a solution that will automatically scroll the overflow to the top when pressing the down arrow key, reaching the bottom of the visible ul, and scroll the overflow down when pressing the up arrow key to ensure the selected li is at the bottom of the visible ul.
I have explored potential solutions using jQuery's scroll function, referencing this post, and this post (which discusses scrollTop), but have yet to find a suitable solution.