加载内容作为一个元素滚动到视图 [英] Load content as an element scrolls into view

问题描述

我的搜索结果在℃的列表; DIV＆GT; 的静态高度元素和溢出：汽车; 的风格。我想加载搜索结果的只有第x个（例如20），并装载另一个X结果作为用户滚动到包含搜索结果的元件的底部。

I have a list of search results in a <div> element with a static height and overflow: auto; in the style. I would like to load only the first x number of search results (e.g. 20), and load another x results as the user scrolls to the bottom of the element containing the search results.

任何人都可以向我解释，我会怎么做呢？我发现了几个例子，但所有这些都使用整个文档的滚动值，而不是一个单一的＆LT; D​​IV＆GT; 。我使用jQuery的，如果它很重要。

Can anyone explain to me how I would do this? I found a few examples, but all of those use the scroll value of the entire document, not a single <div>. I am using jQuery, if it matters.

推荐答案

听起来像你对我要检测的滚动条的位置时，它已经接近尾声。 jQuery开发组围绕谷歌搜索时发现这个。它的一点点添加文件提​​出的解决方案，如果需要的：

Sounds to me like you'd like to detect the scroll bars position when it is near the end. Found this when googling around on the jquery group. Its proposed solution with a little added documentation if needed:

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

这篇关于加载内容作为一个元素滚动到视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！