Question

我正在尝试在div中应用自动滚动。我有一个固定高度div下的元素列表现在我想在第三个高亮显示li元素（即Compt0005）div自动按下时按下键。任何人都可以解决它..

Demo： - here

Answer 1

更改每次出现的

$("#ulSearch li:eq(" + liPossition + ")").css("background-color", "red")

到

 $("#ulSearch li:eq(" + liPossition + ")").css("background-color", "red")[0].scrollIntoView();

Answer 2

此代码完全通过.getBoundingClientRect()方法设置div的scrollTop属性：

$(function () {
    var liPossition = 0;
    var items = $("#ulSearch li");
    var divSearchContent = $("#divSearchContent");
    divSearchContent.hide();
    $("#txtSearch").keydown(function (e) {
        if (e.keyCode == 13) { // if enter pressed
            $("#txtSearch").val(items.eq(liPossition).text());
            divSearchContent.hide();
            return;
        }
        if (e.keyCode != 38 && e.keyCode != 40) { // // if not up or down arrow
            return;
        }
        divSearchContent.show();
        items.eq(liPossition).css("background-color", "");
        if (e.keyCode == 40 && liPossition < items.length - 1) { // down arrow key code
            liPossition++;
        }
        if (e.keyCode == 38 && liPossition > 0) { // up arrow key code
            liPossition--;
        }
        items.eq(liPossition).css("background-color", "red");//[0].scrollIntoView(); return;
        var b1 = divSearchContent[0].getBoundingClientRect();
        var b2 = items.eq(liPossition)[0].getBoundingClientRect();
        if (b1.top>b2.top) {
            divSearchContent.scrollTop( divSearchContent.scrollTop()-b1.top+b2.top );
        }
        else if (b1.bottom<b2.bottom) {
            divSearchContent.scrollTop( divSearchContent.scrollTop()-b1.bottom+b2.bottom );
        }
    });
});

JSFiddle

在li元素溢出上自动滚动div

2 个答案: