Question

I want to implement infinite scrolling (with an AJAX-based loader) in an HTML table body.

My HTML looks something like this:

<table>
  <thead>
    <tr><th>Column</th></tr>
  </thead>
  <tbody>
    <tr><td>Row 1</td></tr>
    <tr><td>Row 2</td></tr>
  </tbody>
</table>

I get a scroll bar on the <tbody> like so:

tbody {
  height:10em; /* Otherwise the tbody expands to fit all rows */
  overflow:auto;
}

To be able to do anything when the user scrolls to the bottom, I need to be able to get the scroll position of the <tbody>. In all of the (jQuery) infinite scroll implementations I’ve seen (such as this one), they subtract the content height from the container height and compare it to the .scrollTop() value.

Unfortunately this may not work with <tbody>, which is both the viewport and the container for the scrolled content. $("tbody").height() returns the viewable (ie: “shrunken”) size, but I don’t know how I can get the full (viewable + hidden) size of the table body. (FWIW, $("tbody").scrollTop() returns a “large” number when scrolled to the bottom, exactly as I would expect it to).

Is there any way to accomplish this?

Answer 1

tbody.scrollHeight works for me.