Scroll into view in JS

Question

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?

Answer 1

After scrolling into view, check if the bottom of the head overlaps the top of the target by taking their getBoundingClientRects. If so, call window.scrollBy by the difference.

const headTr = document.querySelector('thead tr');
document.querySelector('button').addEventListener('click', () => {
  const target = document.getElementById('target');
  target.scrollIntoView();
  const diff = target.getBoundingClientRect().top - target.getBoundingClientRect().bottom;
  if (diff < 0) {
    window.scrollBy(0, diff);
  }
});

<button style="position: fixed; top: 5px; right: 5px;">ScrollIntoView (for Target)</button>
<table>
  <thead>
    <tr style='position: sticky; top: 0;'>
      <td>XYZ</td>
      <td>XYZ</td>
      <td>XYZ</td>
      <td>XYZ</td>
      <td>XYZ</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td id=target style="color: red;">Target</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
    </tr>
    <tr>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
    </tr>
    </tr>
  </tbody>
</table>