Create an infinite page content loop

Question

I'm trying to create a (joke) website that on load does the following:

Begins scrolling at x speed towards the bottom
Continuously loads and appends the same content to the bottom of the page
Continuously scrolls past the additionally loaded content without ever stopping

How would I go about this?

Silvertiger · Answer 1 · 2013-04-23T04:56:42.817

Theoretically you could use javascript to track a div as it scrolls for it's y position and use a jQuery load of the same data/html/php into an appended child div every N pixels.

guess i'll have to try it out and see what i can come up with.

Here's what i came up with that seems to work at a base level

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

yes @ http://www.dan-elkins.com/forever.html – Silvertiger Apr 23 '13 at 05:23 — Silvertiger, Apr 23 '13 at 05:23

score 0 · Accepted Answer · edited May 23 '17 at 11:57

Points to note:

The trick here, is not to use the default swing easing on the animate function to make the animation seamless.
Also, you cannot simply animate to the bottom of the page, but animate to the next step of the current 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
    });
}

Demo:

SEE LIVE DEMO

Create an infinite page content loop

2 Answers2