Scrollbar won't scroll when selected element is out of visibility
===

We have a number of list items in an unordered list of which we can see five at a time. The currently selected list item has its own class ("selected") and when we click up or down, the next list item gets the "selected" class, while the previous one loses it. How do we make it so that when the list item with the "selected" class comes out of the ul's viewable region, the scroll bar will also scroll with the "selected" item? 

It scrolls fine with the mouse, but when the up/down buttons are clicked, the selected class changes but it doesn't scroll. In the CSS, the ul is styled with overflow:auto. I've tried changing the overflow but it doesn't have an effect on the result.



