<分区>
我正在尝试在 div 中应用自动滚动。我现在有一个固定高度 div 下的元素列表，当我在第 3 个突出显示 li 元素(即 Compt0005)div 自动滚动后按下键时。任何人都可以解决它..
演示:- here
标签 javascript jquery html css
<分区>
我正在尝试在 div 中应用自动滚动。我现在有一个固定高度 div 下的元素列表，当我在第 3 个突出显示 li 元素(即 Compt0005)div 自动滚动后按下键时。任何人都可以解决它..
演示:- here
最佳答案
此代码通过 .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 );
}
});
});
关于javascript - li 元素溢出时在 div 上自动滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18359270/