CSS:固定标题表-如何在向上滚动时不关注固定标题后面的视图外的行

Question

背景

我有一个固定标题的表(确切地说是固定的<th>s)，具有垂直滚动的内容。你只需像往常一样用滚动条上下滚动，也可以用上/下箭头键上下滚动。我用红色轮廓突出显示当前关注的行的位置。请参阅下面的内容。

问题

问题是，当向下滚动一点并尝试用up箭头键向上滚动时，它会到达固定标题下的最上面一行。最上面的一行是不可见的，所以当用up键向上滚动时，关注它是不好的。

问题

我如何防止把注意力集中在"；"看不见"；一行理想情况下，如果它到达最后一行的顶部，而不是固定标题后面的行，我希望它能进一步向上滚动。也许我应该对头球做点什么？

最小可重复代码

这是JSFiddle代码

Answer 1

您只需将container.scrollTop = 0设置为以编程方式滚动到最顶部即可。代码适合您的情况：

case 38: // up
currentRow?.previousElementSibling?.focus();
// check if we've reached the first <tr />
// if so, set container.scrollTop = 0
if (!currentRow?.previousElementSibling?.previousElementSibling) {
e.target.closest(".table").scrollTop = 0;
}
break;