Question

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

开始以x速度向底部滚动
连续加载并将相同内容附加到页面底部
连续滚动浏览额外加载的内容，而不会停止

我该怎么做？

Answer 1

从理论上讲，你可以使用javascript来跟踪div，因为它滚动它的y位置并使用相同数据/ html / php的jQuery加载到每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

注意事项：

这里的诀窍是，不要在animate函数上使用默认的swing缓动来使动画无缝。
此外，你不能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

创建无限页面内容循环

2 个答案: