Table 活动行滚动滚动条

Question

我正在尝试让我的 table 行在用户使用箭头键时被选中。正如您在下面看到的那样，这工作得很好：

如您所见，table 在 div 和

中

overflow:auto.

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

这里是 fiddle:

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/

Table 活动行滚动滚动条

Table active row scrolling the scroll bar

javascript

jquery

html-table