Question

我正在尝试在我的页面中创建一个无尽的可滚动div。为此，我尝试使用以下代码 - ＆gt; 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++;
 }
}

在页面中创建无限可滚动div

1 个答案: