CSS：固定标头表 - 滚动时，如何不专注于固定标头后面的视线外行？

Question

背景

I有一个带固定标头的表（确切地说是固定＆lt; th＆gt;），带有垂直滚动内容。您只需像往常一样在滚动条上上下滚动，就可以使用上下箭头键上下滚动。我强调了当前专注的行带有红色轮廓的地方。在下面亲自查看。

问题

问题是，当向下滚动并尝试使用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;