How can i calculate the space between the start of my table header until the end dynamically?

I have the following table with thead and tbody

 <table>
        <thead>
            <tr>
                <td class="red">
                    col 1
                </td>
                <td class="red">
                    col 2
                </td>
            </tr>
        </thead>
       <tbody>
        <tr>
            <td style="width: 300px" class="blue">
                John
            </td>
            <td style="width: 200px" class="blue">
                Peter
            </td>
        </tr>

        <tr>
            <td>
                John
            </td>
            <td>
                Peter
            </td>
        </tr>
        <tr>
            <td>
                John
            </td>
            <td>
                Peter
            </td>
        </tr>
        <tr>
            <td>
                John
            </td>
            <td>
                Peter
            </td>
        </tr>
        <tr>
            <td>
                John
            </td>
            <td>
                Peter
            </td>
        </tr>
        <tr>
            <td>
                John
            </td>
            <td>
                Peter
            </td>
        </tr>
        <tr>
            <td>
                John
            </td>
            <td>
                Peter
            </td>
        </tr>
        <tr>
            <td>
                John
            </td>
            <td>
                Peter
            </td>
        </tr>
        <tr>
            <td>
                John
            </td>
            <td>
                Peter
            </td>
        </tr>
        <tr>
            <td>
                John
            </td>
            <td>
                Peter
            </td>
        </tr>
        <tr>
            <td>
                John
            </td>
            <td>
                Peter
            </td>
        </tr> <tr>
            <td>
                John
            </td>
            <td>
                Peter
            </td>
        </tr>
        
       </tbody>
    </table>

CSS

table {
    border: 1px solid black;
    height: 150px !important;
    overflow: scroll;
    display: block;
    width: 400px;
}

td {
    width: 150px;
}

.red {
    border: 1px solid red !important;
}

.blue {
    border: 1px solid blue;
}

JS

let table = document.querySelector('table');
table.addEventListener('scroll', (event) => {
    console.log(event.target.scrollTop)
})

my table needs to be scrollable and the thead and tbody needs to be together in the same table. I am using such a table where for lazy loading, and everything works fine without the table header. When i incldue my table header my scrolling gets mixed up because than the scrollbar does not start from the beggining of the tbody but from the thead. I need to exclude somehow the scrolling from the thead or to calculate the difference between that start of the thead and it’s end so i will know the difference and i will adjust the scrollPosition bacis on that.

So if i know that that the difference is 50px and on scroll event i am getting 200px i will add 50px.

How can i do this ?