javascript - Scroll Position in a Table Body - Stack Overflow

admin管理员组

文章数量:1325236

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 pare 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 acplish this?

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 pare 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 acplish this?

• javascript
• jquery
• html
• css
• scroll

Share Improve this question Follow asked Apr 22, 2010 at 20:05 Craig WalkerCraig Walker 51.8k5858 gold badges155155 silver badges212212 bronze badges 1

• crickets. The views keep going up but there's no activity. I'm guessing that this is simply not possible given current browsers. – Craig Walker Commented May 6, 2010 at 19:42

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

tbody.scrollHeight works for me.

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.

本文标签： javascriptScroll Position in a Table BodyStack Overflow