创建无限页内容循环

Create an infinite page content loop

本文关键字：循环无限创建更新时间：2023-09-26

我正在尝试创建一个(笑话)网站，在加载时做以下事情:

开始以x速度向下滚动
连续加载并附加相同的内容到页面底部
连续滚动过去额外加载的内容，从未停止

我该怎么做呢?

点注意:

这里的技巧是不要在animate函数上使用默认的swing easing来使动画无缝。
同样，你不能简单地动画到页面的底部，而是动画到当前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
    });
}

演示:

看到现场演示

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

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

这是我想到的，似乎在基本水平上工作

    <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>