Take the 2-minute tour ×

I am trying to create a page that is an endless scrolling loop both up and down.

At the moment I am using jquery to relocate content from the top of the page to the bottom. This creates a nice seemless loop when you scroll down but I would like it to work when the user scrolls up too.

The problem seems to be that even if content is positioned in negative vertical space on the page the scroll will not extend to that space. As far as I am aware there is no way to override this so I am looking for some type of work around.

I have thoughts of using javascript to disable the scrolling and using the scroll event to reposition the elements but there are already lots of absolute positioned elements and animation happening on the page so I'm concerned about performance taking that route.

Any other leads?

share|improve this question
Interesting question! –  Mahmoud Al-Qudsi May 13 '12 at 9:35

5 Answers 5

Clone your HTML body two (or three) times (in javascript or otherwise). Start the page in the middle copy instead of the top, and then you can handle scrolling however you like.

share|improve this answer
hmm... but scrolling beyond the top:0px position seems to be impossible even if you do have elements placed beyond that point. –  Joe Hamilton May 13 '12 at 9:37
You won't be using that syntax any more. Set aside your method for a second and just imagine a simple, JS-free page with a few HTML elements. Clone the contents. Scroll to the end of the first copy (start of the second). Can you not scroll up and down? –  Mahmoud Al-Qudsi May 13 '12 at 9:39
Once the user starts scrolling, then you start moving data from bottom to top. But since you're not starting from the top, the user won't hit the scroll limit. –  Mahmoud Al-Qudsi May 13 '12 at 9:51

Any other leads?

Seen these?

5 jQuery infinite Scrolling Demos

jsfiddle that I cannot find origin of. (I didn't write and don't know who did)

share|improve this answer
None of those have infinite scroll both up and down. –  Mahmoud Al-Qudsi May 13 '12 at 22:04
up vote 2 down vote accepted

OK... I worked it out.

I adapted this script which instantly relocates the scroll location to the top of the page when you get to the bottom and to the bottom when you reach the top.

$(window).scroll(function() {
    if ( $(window).scrollTop() >= 18830 ) {
    else if ( $(window).scrollTop() == 0 ) {

And then I made sure that the content at the bottom and the top of the page was identical. I thought that there would be a flash or something when this relocation happened but it's smooth!

share|improve this answer
"I wrote this script" Do you realise this is the same code that's in the fiddle I posted? –  jon Jun 28 '12 at 21:09
oh sorry. I just noticed this. I didn't intentionally try to trick people in to thinking it was me that wrote the script from scratch. It was an honest mistake. –  Joe Hamilton Mar 11 '13 at 6:09

The solution I like the best is this one (code), because it adds elements at the bottom before the bottom is reached, making sure that scrolling remains continuous (even with smooth scrolling on). However, it doesn't work that well on mobile phones where scrolling can happen pretty quickly. I recommend Marijn Haverbeke's wonderful article on fake scrollbars in CodeMirror where he deals with similar issues.

I leave you with some snippets.



And further down...


share|improve this answer

Building up on Mahmoud's answer, I hacked up this in a few minutes.

It works somewhat (at least on Firefox) when scrolling either with keys or with mouse wheel, but it gets all glitchy when dragging the scrollbar. Depending on how the div heights relate to the viewport height, all kinds of fireworks can happen too.

Still, I hope this can help you get on the right direction.

function onScroll(){
    var SAFETY_MARGIN = 50,
        scrollPos = $(this).scrollTop(),
        docHeight = $(document.body).height(),
        winHeight = $(window).height(),
        firstDiv = $('body>div:first-child')[0],
        lastDiv = $('body>div:last-child')[0],
        lowerLimit = SAFETY_MARGIN,
        higherLimit = docHeight - SAFETY_MARGIN;

    // Scrolling too high
    if( scrollPos <= lowerLimit ){

        // Move content to top;

        // Adjust scroll position to compensate
        // for the new content at the top
        $(window).scrollTop(scrollPos + $(lastDiv).height());


    // Scrolling too low
    else if( scrollPos + winHeight >= higherLimit ){

        // Move content to bottom

        // Adjust scroll position to compensate
        // for the missing content at the top
        $(window).scrollTop(scrollPos - $(firstDiv).height());


    var $body = $(document.body);
    $(window).scrollTop($body.height() / 2);


<div style="height: 600px; background-color: red">&nbsp;</div>
<div style="height: 600px; background-color: green">&nbsp;</div>
<div style="height: 600px; background-color: blue">&nbsp;</div>

share|improve this answer

Your Answer


