CODEWITHSUNDEEP
javascriptjqueryhtmlcssscroll
Craig Walker
Craig Walker

Reputation: 51717

Scroll Position in a Table Body

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?

Upvotes: 2

Views: 11576

Answers (2)

user69173
user69173

Reputation:

tbody.scrollHeight works for me.

Upvotes: 3

mVChr
mVChr

Reputation: 50177

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.

Upvotes: 2

Related Questions