浏览长期无序列表

Question

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

检查此jsFiddle

$('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');
}

我正在寻找的行为与使用键盘滚动浏览一长串元素的元素相同，此插件SelectBoxIt显示我正在寻找的内容。

Answer 1

您可以使用此代码，如果列表超出ul标记的宽度，我使用animate函数在div中导航：

http://jsfiddle.net/goldendousa/p6243/13/

$('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');
    }
});