Javascript 导航长未排序列表

我有一个很长的溢出列表：自动滚动，我设置为键盘导航，问题是当使用键盘时，它不能正确滚动

检查这个

---

我要查找的行为与使用键盘滚动一长串元素时元素的行为相同。此插件显示了我要查找的内容。

您可以使用此代码，如果列表超过ul标记的宽度，我使用动画功能在div内导航：

$（'ul'）.focus（函数（）{
如果（$（'ul li'）.is（'selected'））{
$（'ul li'）.first（）.removeClass（'selected'）；
}否则{
$（'ul li'）.first（）.addClass（'selected'）；
}
});
$（'ul'）.keydown（函数（e）{
如果（e.keyCode==38）{//up
e、 预防默认值（）；
所选变量=$（“.selected”）；
$（“ul li”）.removeClass（“选定”）；
if（selected.prev（）.length==0）{
selected.sides（）.last（）.addClass（“selected”）；
var selectedTopOffset=selected.sides（）.last（）.offset（）.top；
$（'div'）。设置动画({
scrollTop:selectedTopOffset
}, 200);
}否则{
selected.prev（）.addClass（“selected”）；
var selectedTopOffset=$（“div”）.scrollTop（）+selected.position（）.top-$（“div”）.height（）/2+selected.height（）/2；
$（'div'）。设置动画({
scrollTop:selectedTopOffset
}, 200);
}
}
如果（e.keyCode==40）{//down
e、 预防默认值（）；
所选变量=$（“.selected”）；
$（“ul li”）.removeClass（“选定”）；
if（selected.next（）.length==0）{
selected.sides（）.first（）.addClass（“selected”）；
如果（已选择。同级（）.first（）.offset（）.top<0）{
$（'div'）。设置动画({
scrollTop:选中。同级（）.first（）.offset（）.top
}, 200);
}
}否则{
selected.next（）.addClass（“selected”）；
var selectedTopOffset=$（“div”）.scrollTop（）+selected.position（）.top-$（“div”）.height（）/2+selected.height（）/2；
$（'div'）。设置动画({
scrollTop:selectedTopOffset
}, 200);
}
}
});
$（'li'）。单击（函数（）{
如果（$（this）.is（'.selected'））{
返回true；
}否则{
$（'li'）.removeClass（'selected'）；
$（this.addClass（'selected'）；
}
});

$('ul').keydown(function (e) {
    if (e.keyCode == 38) { // up
        var selected = $(".selected");
        $listItems.removeClass("selected");
        if (selected.prev().length == 0) {
            selected.siblings().last().addClass("selected");
        } else {
            selected.prev().addClass("selected");
        }
    }
    if (e.keyCode == 40) { // down
        var selected = $(".selected");
        $listItems.removeClass("selected");
        if (selected.next().length == 0) {
            selected.siblings().first().addClass("selected");
        } else {
            selected.next().addClass("selected");
        }
    }
})
});
$listItems.click(function () {
if ($(this).is('.selected')) {
    return true;
} else {
    $('li').removeClass('selected');
    $(this).addClass('selected');
}

$('ul').focus(function() {
    if ($('ul li').is('.selected')) {
        $('ul li').first().removeClass('selected');
    } else {
        $('ul li').first().addClass('selected');
    }
});
$('ul').keydown(function(e) {
    if (e.keyCode == 38) { // up
        e.preventDefault();
        var selected = $(".selected");
        $("ul li").removeClass("selected");
        if (selected.prev().length == 0) {
            selected.siblings().last().addClass("selected");           
            var selectedTopOffset = selected.siblings().last().offset().top;

                $('div').animate({
                    scrollTop: selectedTopOffset
                }, 200);

        } else {
            selected.prev().addClass("selected");

            var selectedTopOffset = $("div").scrollTop() + selected.position().top - $("div").height()/2 + selected.height()/2;

                $('div').animate({
                    scrollTop: selectedTopOffset
                }, 200);


        }
    }
    if (e.keyCode == 40) { // down
        e.preventDefault();
        var selected = $(".selected");
        $("ul li").removeClass("selected");
        if (selected.next().length == 0) {
            selected.siblings().first().addClass("selected");

            if (selected.siblings().first().offset().top < 0) {
                $('div').animate({
                    scrollTop: selected.siblings().first().offset().top
                }, 200);
            }

        } else {

            selected.next().addClass("selected");


            var selectedTopOffset = $("div").scrollTop() + selected.position().top - $("div").height()/2 + selected.height()/2;

                $('div').animate({
                    scrollTop: selectedTopOffset
                }, 200);

        }
    }
});

$('li').click(function() {
    if ($(this).is('.selected')) {
        return true;
    } else {
        $('li').removeClass('selected');
        $(this).addClass('selected');
    }
});