在页面中创建无尽的可滚动div

Question

I'm trying to create an endless scrollable div in my page. To do so I'm trying to use the following code --> 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(); $(window).scroll(function(){

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

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

}); });

But, here the code is for creating the same for an entire page (window) where as I need to create it for a specific 'div' in a webpage.

In this part of the page I have difficulty figuring out the dimensions of the 'div'.

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

A similar thing would the "Ticker" section on Facebook on the right side of the page, which tells us what our friends are doing in real time.

Please help me in figure out the code for this requirement... Thanks in advance!

Answer 1

How about this (the randomPara stuff is there only to simulate the content):

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