创建无限页面内容循环

Question

我试图创建一个（笑话）网站，上载执行以下操作：

1. 始于倍速度向底部
2. 连续负载滚动和追加相同内容页面
3. 的底部连续滚动经过额外加载的内容没有人停下

我怎么会去吗？

Answer 1

注意要点：

1. 这里的诀窍，不使用默认的摆动宽松在动画功能上使动画无缝。

2. 此外，您不能simply animate to the bottom of the page，但动画的当前scrollTop的下一步。

的jQuery：

$(function() { 
    // every 1 seconds, check + update 
    setInterval(appendContent, 800); 
    setInterval(continueScrolling, 1000); 
}); 

var b = $('body'); 

// if almost at bottom, append more content 
function appendContent() { 
    if($(window).scrollTop() + $(window).height()*2 > $(document).height()) { 

     // Load/append your new content here. 
     // I am doubling the content for demostration purposes. 
     b.html(b.html() + b.html()); 
    }  
} 

// continue scrolling linearly 
function continueScrolling() { 

    // get current scroll position 
    y = $(window).scrollTop(); 

    // stop previous animation, animate to the next 1000 pixels 
    // to make it scroll faster, increase the constant after the y 
    $("html, body").stop() 
    .animate({ scrollTop: y+1000 }, { 
     duration: 1000, // you won't want to scroll too quickly 
     easing: 'linear', // cannot use the default 'swing' here 
     queue: false 
    }); 
} 

演示：

SEE LIVE DEMO

Answer 2

理论上你可以使用javascript来追踪div，因为它滚动的位置是y，并且每N像素使用相同数据/ html/php的jQuery加载到附加的子div中。

我猜我必须尝试一下，看看我能想出什么。

这就是我想出了，似乎在基础层面上工作

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     function keepGoing(counter) { 
      var objTo = document.getElementById('foreverDiv') 
      var divtest = document.createElement("moreStuffDiv" + counter); 
      divtest.setAttribute("id", "moreStuffDiv" + counter); 
      divtest.innerHTML = "new div " + counter + "<br>"; 
      objTo.appendChild(divtest); 
      document.getElementById('moreStuffDiv' + counter).scrollIntoView(); 
      counter = counter +1; 
     } 
     jQuery(document).ready(function() { 
      setInterval('keepGoing(1)', 10); 
     }); 
    </script> 
    <div id="contentDiv"> 
     <h1>Content</h1> 
     <div id="foreverDiv"> 

     </div> 
    </div>