創建無限頁面內容循環

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>