javascript - 创建一个无限的页面内容循环

Question

我正在尝试创建一个加载时执行以下操作的（笑话）网站：

1. 开始以 x 速度向底部滚动
2. 不断加载相同的内容并将其附加到页面底部
3. 连续滚动超过额外加载的内容，而不会停止

我该怎么办？

Answer 1

从理论上讲，您可以使用 javascript 来跟踪 div，因为它滚动到它的 y 位置，并使用 jQuery 加载相同的 data/html/php 到每 N 个像素附加的子 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>

Answer 2

注意事项：

1. 这里的诀窍是不要在动画函数上使用默认的摆动缓动来使动画无缝。

2. 此外，您不能简单地动画到页面底部，而是动画到当前滚动顶部的下一步。

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