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?

Does this answer your question? [scrollIntoView Scrolls just too far](https://stackoverflow.com/questions/24665602/scrollintoview-scrolls-just-too-far) — yuriy636, Feb 12 '22 at 16:10
you can use `document.getElementById('target').scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});` — Kaveh Karami, Feb 12 '22 at 16:33

Christian Vincenzo Traina · Accepted Answer · 2022-02-12T19:31:45.647

3

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 aligns the scroll to the bottom, it's not covered anymore.

edited Feb 12 '22 at 19:31

answered Feb 12 '22 at 16:19

Christian Vincenzo Traina

9,546
2
40
63

score 2 · Answer 2 · answered Feb 12 '22 at 16:19

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>

I've to admit this is a better solution than the one proposed by me — Christian Vincenzo Traina, Feb 12 '22 at 16:21
oh it works, but how? whats the difference between bottom and top of the ```Target```? — MHSarmadi, Feb 12 '22 at 16:24
See [the link](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect) in my answer that shows the values returned by `getBoundingClientRect` - specifically, [this image](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect/element-box-diagram.png) — CertainPerformance, Feb 12 '22 at 16:27
and, i think it works, when the height of tr(in tbody) is equal to height of tr(in thead); right? — MHSarmadi, Feb 12 '22 at 16:31

score 0 · Answer 3 · answered Feb 01 '23 at 13:04

I've run into the same issue but found an article solving this issue with CSS. In my case, this was much easier to implement and handle.

If you append scroll-margin-top to a tag it will add the margin to that element automatically when scrollIntoView() is called.

#target{
  scroll-margin-top: 1rem;
}

<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
</head>
<body>
      <button onclick="document.getElementById('target').scrollIntoView();" 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>
                        <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>
                        <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>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                        <td>abc</td>
                  </tr>
            </tbody>
      </table>
</body>
</html>

Scroll into view in JS

3 Answers3