Scroll Position in a Table Body

Posted by Craig Walker on Stack Overflow See other posts from Stack Overflow or by Craig Walker
Published on 2010-04-22T20:05:57Z Indexed on 2010/05/15 0:34 UTC
Read the original article Hit count: 601

Filed under:
|
|
|
|

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?

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about JavaScript