表格活动行滚动滚动条

Question

我试图在用户使用箭头键时选择我的表格行。 这很好用，如下所示：

如您所见，该表位于带

的div内

overflow:auto.

我的问题是：当用户到达div限制下的行时，我想让滚动条跟随选定的行。

这是小提琴：

https://jsfiddle.net/alinedanawara/4spzwvh6/1/

Answer 1

您可以尝试在突出显示功能中添加scrollTop，以便根据tableIndex变量和行的高度尽可能长时间将突出显示的项目保留在列表顶部：

$('#areaItens').animate({
    scrollTop: $('#data tbody tr:eq('+tableIndex+')').height() * tableIndex
}, 0); 

这将确保容器显示突出显示的项目。您可以使用演示here。

Answer 2

你可以这样做。 当突出显示的元素位于视口下方时，滚动到顶部。

var parent = $("#areaItens");
var currentEl = $('#data tbody tr:eq(' + tableIndex + ')');
if (currentEl.offset().top > parent.height()) {
  parent[0].scrollTop = currentEl[0].offsetTop;
}
if (currentEl.offset().top < 0) {
  parent[0].scrollTop = currentEl[0].offsetTop - parent.height() + $('#data tbody tr').first().height();
  }
}

这是一个演示 https://jsfiddle.net/4spzwvh6/3/

如果您希望突出显示的单元格始终位于顶部，则可以像这样完成

var parent = $("#areaItens");
var currentEl = $('#data tbody tr:eq(' + tableIndex + ')');
parent[0].scrollTop = currentEl[0].offsetTop;

以上为 https://jsfiddle.net/4spzwvh6/4/

的演示