javascript - 网页上 div 中的“无尽滚动”

Question

我想在页面中创建一个包含无限滚动内容的 div。

为了识别可滚动内容的结尾以便从数据库加载更多数据，我编写了以下内容:

$(window).scroll(function(){

  var wintop = $(window).scrollTop(), docheight = $(document).height(), winheight = $(window).height();
  var  scrolltrigger = 0.95;

  if  ((wintop/(docheight-winheight)) > scrolltrigger) {
     lastAddedLiveFunc();
  }
});

问题:以下代码用于创建适合整个网页的无限滚动，但我如何为网页内的 'div' 编写相同的代码？

(提示:一个完全相似的东西是 Facebook 上的 Ticker，在右边实时显示你 friend 最近的事件。)

Answer 1

原理完全一样。 div 将是您的浏览器视口(viewport)，div 内容是您的文档。你只需要交换

• $(window).scroll() --> $("#someDiv").scroll()
• $(window).scrollTop() --> $("#someDiv").scrollTop()
• $(document).height() --> $("#someDiv")[0].scrollHeight
• $(window).height() --> $("#someDiv").height()

它应该可以工作。

注意:

• scrollHeight 是属性，不是函数。
• scrollHeight 不是 jQuery，因此您需要从选择器的实际 javascript 元素中获取它，因此添加了 [0]。另一种方法是使用 $("#someDiv").prop("scrollHeight")。