CSS：固定 header 表 - 向上滚动时如何不关注固定 header 后面的视线外行？

Question

背景

我有一个固定 header 的表（确切地说是固定的<th> s），具有垂直滚动的内容。 您只需像往常一样使用滚动条向上和向下滚动，您可以使用向上/向下箭头键向上和向下滚动。 我用红色轮廓突出显示当前关注的行在哪里。 下面自己看看。

问题

问题是当向下滚动一点并尝试使用up箭头键向上 go 时，它到达固定 header 下的顶行。 顶行是不可见的，因此在使用up键向上滚动时关注该行是不利的。

问题

如何防止专注于“视野外”行？ 理想情况下，如果它到达最后一个可见行，而不是固定 header 后面的行，我希望它进一步向上滚动。 也许我应该对 header 做点什么？

最小可重现代码

这是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;