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: 631
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