在页面中创建无尽的可滚动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（）; $（窗口）.scroll（函数（）{

  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”部分，它告诉我们我们的朋友实时在做什么。

请帮助我找出此要求的代码...预先感谢！

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