[Vuejs]-How do i determine the current top and bottom row in a scrollable HTML table using JS/VueJS?

by

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.

Leave a comment