CSS: Fixed header table - how to not focus on the out-of-view row behind the fixed header when scrolled up?

Question

Background

I have a table with fixed header (fixed <th>s to be exact), with vertically scrollable content. You just scroll up and down with the scroll bar as usual, and you can scroll up and down with up/down arrow keys. I am highlighting where is the currently focused row with a red outline. See for yourself below.

Problem

The problem is when scroll down a bit and try to go up with up arrow key, it reaches the top row under the fixed header. the top row is not visible, so focusing on that when scrolling up with up key is not favorable.

Question

How do I prevent focusing on a "out-of-view" row? Ideally I want it to scroll further up if it reaches the top last visible row, not the one behind the fixed header. Maybe I should do something with the header?

Minimum reproducible code

Here is the JSFiddle code

Answer 1

You can just set container.scrollTop = 0 to programmatically scroll to very top. Code adapted to your case:

    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;