在div元素溢出自动滚动

Question

我试图在div中应用自动滚动。我有一个固定高度div下的元素列表，现在我希望当我按下第三个高亮元素（即Compt0005）div后自动滚动键。任何机构可以解决这个问题..

Demo： - here

Answer 1

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

Answer 2

变化

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

每一次出现到

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