Question

我想在HTML表格体中实现无限滚动（使用基于AJAX的加载器）。

我的HTML看起来像这样：

<table>
  <thead>
    <tr><th>Column</th></tr>
  </thead>
  <tbody>
    <tr><td>Row 1</td></tr>
    <tr><td>Row 2</td></tr>
  </tbody>
</table>

我在<tbody>上有一个滚动条，如下所示：

tbody {
  height:10em; /* Otherwise the tbody expands to fit all rows */
  overflow:auto;
}

当用户滚动到底部时，为了能够做任何事情，我需要能够获得<tbody>的滚动位置。在我见过的所有（jQuery）无限滚动实现（such as this one）中，它们从容器高度中减去内容高度，并将其与.scrollTop（）值进行比较。

不幸的是，这可能不适用于<tbody>，它是视口和滚动内容的容器。 $("tbody").height()返回可查看的（即：“缩小”）大小，但我不知道如何获得表体的完整（可查看+隐藏）大小。（FWIW，$("tbody").scrollTop()在滚动到底部时会返回一个“大”数字，正如我所期望的那样。

有没有办法实现这个目标？

Answer 1

当您需要隐藏高度时，您可以将高度设置为自动，抓住它，然后将高度返回到强制尺寸。

var $tbody = $('tbody');
var initTbodyHeight = $tbody.height();
$tbody.css('height','auto');
var autoTbodyHeight = $tbody.height();
$tbody.css('height',initTbodyHeight);

即使IE应该足够快地处理，人眼也不会看到任何闪烁。

Answer 2

tbody.scrollHeight适合我。

在表体中滚动位置

2 个答案: