Search code examples
htmlinfinite-loopinfinite-scrollinfinite

Infinite text repeat with infinite scroll on web page


How do I make a web page repeat the content (a block of text) every time a user hits the end of the web page – like with infinite scroll, but with the same content?


Solution

  • A thread that already answers your question:

    Javascript how to detect if browser window is scrolled to the bottom

    And to make it infinite you simply append a tag with its content every time the "window-bottom" state is reached.

    This could be expressed as such:

    window.onscroll = function(ev) {
        if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
            // you're at the bottom of the page
            var div = document.createElement('div')
            div.innerHTML = "your content"
            document.body.appendChild(div)
        }
    }