Scroll Position in a Table Body

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

When you need the hidden height you can set the height to auto, grab it, then return the height to the forced size.

var $tbody = $('tbody');
var initTbodyHeight = $tbody.height();
$tbody.css('height','auto');
var autoTbodyHeight = $tbody.height();
$tbody.css('height',initTbodyHeight);

Even IE should process this fast enough without any flicker visible to human eyes.

Answer 2

tbody.scrollHeight works for me.