I have an HTML code, having a big table. and I need to scroll to access all of the rows.
And I made the thead as a sticky tag. because I need this tag everywhere. (position: sticky; top: 0;)
But, when I want to use firstCell.scrollIntoView(); in JavaScript, firstCell will be covered by thead!
You can see the sample in this link
In this example, the Target is the first cell in the Table, and by clicking the button, it has to scroll into view of the Target
but Target will be at the backside of thead
how can I fix this problem?
>Solution :
Since the thead has a sticky position, its size doesn’t get taken into account when calculating the available space.
A workaround would be using scrollIntoView({ behavior: 'smooth', block: 'end' }) in place of scrollIntoView().
This only works because the height of the thead is equal to the height of the tr, so if it align the scroll to the bottom, it’s not covered anymore.