I am trying to incorporate infinite scrolling with an AJAX-based loader in the body of an HTML table.
Here is a snippet of my HTML code:
<table>
<thead>
<tr><th>Column</th></tr>
</thead>
<tbody>
<tr><td>Row 1</td></tr>
<tr><td>Row 2</td></tr>
</tbody>
</table>
I have added CSS styling to create a scroll bar within the <tbody>:
tbody {
height:10em; /* Prevents tbody from expanding to show all rows */
overflow:auto;
}
In order to detect when the user scrolls to the bottom, I need to access the scroll position of the <tbody>. Most existing infinite scroll implementations using jQuery involve subtracting the content height from the container height and comparing it to the .scrollTop() value (like this one).
However, this approach may not work with the <tbody>, as it serves as both the viewport and container for the scrolled content. While $("tbody").height() returns the viewable size, I am unsure how to obtain the full (viewable + hidden) size of the table body. Notably, $("tbody").scrollTop() correctly provides a larger number when scrolled to the bottom as expected.
Is there a way to overcome this challenge?