根据滚动位置在表中加载内容

时间:2012-02-15 15:22:31

标签: javascript jquery

我正在使用jQuery,我已经设置了一个具有特定高度的表,overflow:scroll。我想知道我应该访问什么,以便知道何时从服务器加载更多数据(我不需要帮助ajax调用或加载实际数据)。相反,我试图了解如何知道我的滚动位置或知道何时接近数据的底部(因此我可以提前加载更多)。

那么,我怎么知道何时根据滚动位置加载更多数据?

1 个答案:

答案 0 :(得分:0)

这是一个解决方案,使用非标准(但广泛支持的)scrollHeight属性:

$("table").on("scroll", function(event) {
  var $elem = $(event.target);
  if(event.target.scrollHeight - $elem.scrollTop() === $elem.outerHeight()) {
    // Scrolled to bottom, load more data
  }
});

您可能希望在用户到达底部之前加载更多数据,如果是这样,您应该使用一些阈值:

$("table").on("scroll", function(event) {
  var $elem = $(event.target)
    , threshold = 100;
  if(event.target.scrollHeight - $elem.scrollTop() + threshold >= $elem.outerHeight()) {
    // Scrolled to bottom, load more data
  }
});

如果您不想使用scrollHeight,则必须有一个内部元素,其高度可用于计算。也许用table包裹div,然后在overflow: scroll上设置div。有关详细信息,请参阅how to tell if you're scroll to bottom