What is the best way to identify the top and bottom row currently visible in a scrollable HTML table using JavaScript and VueJS?

Question

What is the best way to identify the top and bottom row currently visible in a scrollable HTML table using JavaScript and VueJS?

In my HTML table, there is a thead and tbody sections, with an unpredictable number of rows in the tbody based on the array size.

This table has a max-height and can be scrolled. I want to be able to accurately calculate the new top and bottom rows displayed when scrolling.

Furthermore, I am looking to achieve this using only JavaScript without relying on jQuery.

Although I attempted to implement the solution provided in this question, it did not yield accurate results, sometimes miscalculating by 2-7 rows: Determine top row in html table

javascript html css vue.js

Answer 1

Answer №1

If you want to determine which rows are currently visible within a parent table, consider utilizing the IntersectionObserver API. By creating an intersection observer for each row and checking the isIntersecting property, you can easily identify whether a row is in the viewport 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 keep track of the first and last visible rows, you could maintain a list like "visibleElements" and add or remove rows as they come into view or disappear. Another option would be to dynamically toggle a "visible" class based on visibility changes.

Answer 2

If you want to determine which rows are currently visible within a parent table, consider utilizing the IntersectionObserver API. By creating an intersection observer for each row and checking the isIntersecting property, you can easily identify whether a row is in the viewport 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 keep track of the first and last visible rows, you could maintain a list like "visibleElements" and add or remove rows as they come into view or disappear. Another option would be to dynamically toggle a "visible" class based on visibility changes.

What is the best way to identify the top and bottom row currently visible in a scrollable HTML table using JavaScript and VueJS?

Answer №1

Similar questions

Problem with CSS: The fixed footer is too wide when set at a width of 100%

What is the process of displaying text within a link?

Issue with React component not updating

The styles order definition in the Material-UI production build may vary from that in development

Click to position custom text on image

Choosing various items from the drop-down menu to display on the webpage

What is the method for triggering the output of a function's value with specified parameters by clicking in an HTML

When working with Vue 3, remember that inject() function is only allowed within setup or functional components

Explore and target elements using browser inspection

Display a background color behind an <img> element when the image's dimensions are smaller than the page

The issue at hand is why the closure is not functioning properly when variables are assigned to the callback of the getCurrentLocation function

Troubleshooting: jQuery AJAX .done() function failing to execute

Sequelize Connection Issue: SSL certificate not valid

The circular pattern includes six circles perfectly arranged within the larger circle

Sending the ID of a mapped button to a component

Leveraging RXJS for efficient data retrieval in nodejs

What is the procedure for invoking a function when the edit icon is clicked in an Angular application

Struggling to generate a cookie through an express middleware

What is the best way to download an updated social media post for a Django user?

The Node.js application is unable to execute due to the error: "View "error" could not be found in the views directory."