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

Loading content in table based upon scrolling position

本文关键字：加载 滚动 位置      更新时间：2023-09-26

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

那么，我如何知道何时根据滚动位置加载更多数据？

以下是一个使用非标准（但广泛支持）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，你必须有一个内部元素，你可以使用它的高度来计算。也许用div包装table，并在div上设置overflow: scroll。查看如何判断是否滚动到底部以获取详细信息。

相关文章：