javascript - 在页面中创建一个无限滚动的 div

Question

我正在尝试在我的页面中创建一个无限滚动的 div。为此，我尝试使用以下代码 --> http://jsfiddle.net/cyrus2013/Qq85d/

$(document).ready(function(){

function lastAddedLiveFunc()
{
    $('div#lastPostsLoader').html('<img src="../bigLoader.gif">');

    $.get("loadmore.php", function(data){
        if (data != "") {
            //console.log('add data..');
            $(".items").append(data);
        }
        $('div#lastPostsLoader').empty();
    });
};

//lastAddedLiveFunc(); $(窗口).滚动(函数(){

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

  if  ((wintop/(docheight-winheight)) > scrolltrigger) {
     //console.log('scroll bottom');
     lastAddedLiveFunc();
  }

}); });

但是，这里的代码用于为整个页面(窗口)创建相同的代码，因为我需要为网页中的特定“div”创建它。

在页面的这一部分，我很难确定“div”的尺寸。

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

Facebook 上页面右侧的“Ticker”部分也有类似的功能，它可以实时告诉我们 friend 们在做什么。

请帮我找出满足此要求的代码...提前致谢!

Answer 1

这个怎么样(randomPara 的东西只是用来模拟内容):

DEMO

var scroller;
var initContents = 10;
var shown = 0;
var content = [];

function init(){
 var scroller = document.getElementById('scroller');
 for(var i=0;i<100;i++){
  var randomPara = "";
  var words = Math.floor(Math.random()*100);
  for(var j=0;j<words;j++) randomPara += "word ";
  content.push(randomPara+"<br>");
 }
 for(var i=0;i<initContents;i++){
  scroller.innerHTML += content[shown];
  shown++;
 }
 scroller.onscroll = function(){
  if(shown < content.length) if(this.scrollTop >= this.scrollHeight-this.clientHeight)
   scroller.innerHTML += content[shown];
   shown++;
 }
}