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

Question

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

请问如何实现？我找到了一些例子，但它们都使用整个文档的滚动值，而不是单个<div>。如果有影响，我正在使用jQuery。

- Aistina

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
});

- gnarf

Answer 2

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

- nickf