javascript - 当元素滚动到视图中时加载内容

Question

我在具有静态高度和样式的<div>元素中有一个搜索结果列表。overflow: auto;我只想加载前 x 个搜索结果（例如 20 个），并在用户滚动到包含搜索结果的元素底部时加载另一个 x 结果。

谁能向我解释我将如何做到这一点？我找到了一些示例，但所有这些都使用整个文档的滚动值，而不是单个<div>. 如果重要的话，我正在使用 jQuery。

Answer 1

听起来你想在滚动条接近尾声时检测它的位置。 在 jquery 组上搜索时发现了这个。如果需要，它提出的解决方案会添加一些文档：

$.fn.isNearTheEnd = function() {
  // remember inside of $.fn.whatever = function() {}
  //   this is the jQuery object the function is called on.
  //   this[0] is DOMElement
    return this[0].scrollTop + this.height() >= this[0].scrollHeight;
};

// an example.
$("#content").bind("scroll", function() {
  if ($(this).isNearTheEnd()) // load some content
});

Answer 2

如果您将 div.top() + .height()与窗口进行比较，.scrollTop + .height那么您可以知道您何时位于该 div 的底部，然后触发下一个内容加载...