0

I have a standard HTML table with a thead and tbody, there could be any amount of rows in the tbody as it's dependent on the array size.

The table has a max-height and so is therefore scrollable. When the table is scrolled i want to be able to calculate the new top and bottom row being displayed.

Also I can't use jquery for this, I just want to use javascript.

I tried implementing the accepted answer for this question but it seemed to not be accurate and miscalculate anywhere from like 2-7 rows at times... Determine top row in html table

bambooleotard
  • 1
  • 1

1 Answers1

0

You may be able to use the IntersectionObserver api to check what rows are visible within the parent table. Add an intersection observer for each row, and use isIntersecting to check whether the row is visible or not.

const rows = document.querySelector('.row')

const rowsObserver = new IntersectionObserver(entries => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          (your code here)
        } else {
          (your code here)
        }
      })
    })

rowsObserver.observe(rows)

To calculate the first and last visible rows, you might add or remove each row from a "visibleElements" array as their visibility changes, or toggle a "visible" class.

awkwardlyjoyful
  • 26
  • 5