1

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

Demo:-这里

4

2 回答 2

3

改变每一次发生

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

到

 $("#ulSearch li:eq(" + liPossition + ")").css("background-color", "red")[0].scrollIntoView();
于 2013-08-21T13:58:21.123 回答
3

此代码完全通过.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

于 2013-08-21T16:34:11.983 回答