根据滚动位置在表中加载内容 [英] Loading content in table based upon scrolling position

问题描述

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

I'm using jQuery, and I already have a table set up with a specific height, with overflow:scroll. I'm wondering what I should access in order to know when to load more data from the server (I don't need help with the ajax calls or loading the actual data). Rather, I'm trying to understand how to know my scroll position or to know when I'm near reaching the bottom of the data (so I can load more ahead of time).

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

So, How do I know when to load more data based upon scroll position?

推荐答案

这是一个解决方案，使用非标准（但广泛支持） scrollHeight 属性：

Here is a solution, using the non-standard (but widely supported) scrollHeight property:

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

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

You might want to load more data before the user reaches the bottom, if so, you should use some threshold:

$("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 包装表，并设置 overflow：scroll 而不是 div 。请参见如何判断滚动到底部了解详细信息。

If you don't want to use scrollHeight, you have to have an inner element the height of which you can use to calculate. Perhaps wrapping the table with a div, and setting overflow: scroll on the div instead. See how to tell if you're scroll to bottom for details.

这篇关于根据滚动位置在表中加载内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！