Loop Scroll Endless

[Andres_Soler]

Hello,

I have been trying to achieve this scrolling effect similar to this:

http://thisisclimate.com/

I have managed to get the website to scroll up and down endlessly on desktop

https://s-s-creative.webflow.io/

But on mobile it is glitchy and does not scroll smoothly.

Here is the link to my webflow project

https://preview.webflow.com/preview/s-s-creative?utm_source=s-s-creative&preview=decbbdca620af7e0dd7c341753b1d8f0

the code I used is this:

<script>
var docHeight = 999999,
  windowHeight = -1,
  thisY = 0,		
  lastY = 0,
  blocker = true,
  IE = document.all?true:false;

setDocHeight = function() {
  var d = document;
  window.setTimeout(function() {
    docHeight = Math.max(
      Math.max(d.body.scrollHeight, d.documentElement.scrollHeight),
      Math.max(d.body.offsetHeight, d.documentElement.offsetHeight),
      Math.max(d.body.clientHeight, d.documentElement.clientHeight))
  }, 0);
}
setWindowHeight = function() {
  window.setTimeout(function() {
    if (document.body && document.body.offsetWidth)
      windowHeight = document.body.offsetHeight;
    if (document.compatMode=='CSS1Compat' && document.documentElement && document.documentElement.offsetWidth )
      windowHeight = document.documentElement.offsetHeight;
    if (window.innerHeight && window.innerWidth)
      windowHeight = window.innerHeight;
  }, 0);
}
getYPosition = function() {
  if (self.pageYOffset) return self.pageYOffset;
  if (document.documentElement && document.documentElement.scrollTop)
    return document.documentElement.scrollTop;
  if (document.body.scrollTop) return document.body.scrollTop;
    return 0;
}
infiniteScroll = function() {
  thisY = getYPosition();

  if(thisY != lastY && blocker) 
    blocker = false;

  lastY = thisY;

  if(!blocker) {
    if(windowHeight + thisY >= docHeight) {
      blocker = true;
      window.scroll(0, 0);
      lastY = 0;
    } else if(thisY === 0) {
      blocker = true;
      window.scroll(0, windowHeight);
      lastY = windowHeight;
    }	
  }
}
initialize = function() {
  setDocHeight();
  setWindowHeight();
  setInterval("infiniteScroll()", 1);
}

if(IE) {
  window.attachEvent('onresize', setWindowHeight);
  window.attachEvent('onload', initialize);
} else {
  window.addEventListener('resize', setWindowHeight, false);
  window.addEventListener('load', initialize, false);
}


</script>

<script>
$('document').ready(function() {


    var origDocHeight = document.body.offsetHeight;

    var clone=$("body").contents().clone();
    clone.appendTo("body");
    clone.prependTo("body");

    $(document).scroll(function(){ 

        var scrollWindowPos = $(document).scrollTop(); 

        if(scrollWindowPos >= origDocHeight ) { 
            $(document).scrollTop(0); 
        }
        if(scrollWindowPos <= 0 ) { 
             $(document).scrollTop(origDocHeight); 
             
             
             
         }        
    });
});
</script>

How can I get it to scroll smoothly on mobile?

[Andres_Soler]

Bump, does anyone have a solution? or any info?

[Andres_Soler]

Any help with this? I was really hoping to get some help with this.

[rileyj_s (Riley Jones)]

How is it glitchy on mobile?

[Andres_Soler]

@rileyj_s
What I mean by glitchy is that when I scroll down on mobile, once I reach the bottom of the page it appears again at the top which is great BUT the scrolling delay completely stops. I don’t want the scrolling to come to an abrupt stop. Does that make sense?

This is what I mean

When I get to the bottom, the top appears again but it comes to a stop which is not the effect I want. Is there anyway to get around this? I want the scroll to be continuous, fluid and smooth throughout the loop like it is on desktop.

[Andres_Soler]

Anyone have any input for this?

[Cjh (CJ)]

Hi @Andres_Soler, I’m actually working on something that requires this functionality so I’ll update this thread with a solution [hopefully] soon. As a side note, the example you referenced is actually not looping the scroll on mobile - Rather, they are infinitely repeating the content (down only), which means the content gets longer and longer as they user scrolls down.

What I’m working on is fairly similar to what you’ll find here: http://newland.tv/

[Andres_Soler]

Thank you so much @Cjh, this would open up great design ideas for me!

[Cjh (CJ)]

Here’s a clean working version for mobile/touch devices:

https://looper-ed6ca6.webflow.io/

I unfortunately cannot make it cloneable as I’m using the Greensock ‘Modifiers’ and ‘ThrowProps’ plugins which are paid-for only ($99/yr). Happy to share it with you without those plugins included.

[Cjh (CJ)]

@Andres_Soler I just updated my previous comment. Please see above.

[Andres_Soler]

Hey @Cjh this is awesome! thank you so much. Yes please share! So this would work on desktop as well?

[gfacloner5 (George Falconer)]

@cjh @Andres_Soler hey this looks great! Are you able to share the solution you both found please? Incredibly new to Webflow so I’m still finding my feet with all of this

[Petras_bandb (P)]

Would love to know how to do this too, spend ages trying to get this method working -

Infinite Loop integration

Hi there, can somebody help me to solve this? I can’t seem to be making this work, what am I doing wrong? I tried the solution above, but unfortunately the preview link of the example has been changed too much and I don’t think the structure is there anymore. https://preview.webflow.com/preview/petras?utm_medium=preview_link&utm_source=dashboard&utm_content=petras&preview=1114100d69af873b24d2494f49c35577&mode=preview Thanks in advance!

However unsuccessful, please help! Ideally would like to achieve the effect as per “thisisclimate.com”

[Daniel_Remes]

Hi,

Did you get this to work? Do you know how to apply this to a div and not the whole page?

My best, Dan

[Gio]

Any update on this? I am trying to find a solution to achieve an effect like in these pages:

https://nomos.archi

https://carolanneward.com

Thanks

[Danilo_Sierra]

Hi everyone! I came here from the future with a possible solution with some help from ChatGPT. I asked essentially how to make this code work and after some back-and-forth I got code that works as described here.

ChatGPT described what it did as

This code works by creating a clone of the body contents and prepending it to the body element. This creates the illusion of infinite scrolling. The $(document).scroll function is then used to detect when the user has scrolled to the top or bottom of the page. If the user has scrolled to the bottom, the page is scrolled to the top and the blocker variable is reset. If the user has scrolled to the top, the page is scrolled to the bottom and the blocker variable is reset.

When I tested the code in the question it worked nicely downwards but not upwards, and did not work in mobile. What needed to happen was to ensure 100% symmetry on both viewports. I managed by using a full-screen first screen and full-screen last screen.

And now the code:

<script>
  var docHeight = 999999,
    windowHeight = -1,
    thisY = 0,
    lastY = 0,
    blocker = true,
    IE = document.all?true:false;

setDocHeight = function() {
    var d = document;
    window.setTimeout(function() {
        docHeight = Math.max(
            Math.max(d.body.scrollHeight, d.documentElement.scrollHeight),
            Math.max(d.body.offsetHeight, d.documentElement.offsetHeight),
            Math.max(d.body.clientHeight, d.documentElement.clientHeight)
        )
    }, 0);
};

setWindowHeight = function() {
    window.setTimeout(function() {
        if (document.body && document.body.offsetWidth) {
            windowHeight = document.body.offsetHeight;
        }
        if (document.compatMode=='CSS1Compat' && document.documentElement && document.documentElement.offsetWidth ) {
            windowHeight = document.documentElement.offsetHeight;
        }
        if (window.innerHeight && window.innerWidth) {
            windowHeight = window.innerHeight;
        }
    }, 0);
};

getYPosition = function() {
    if (self.pageYOffset) return self.pageYOffset;
    if (document.documentElement && document.documentElement.scrollTop) return document.documentElement.scrollTop;
    if (document.body.scrollTop) return document.body.scrollTop;
    return 0;
};

infiniteScroll = function() {
    thisY = getYPosition();

    if (thisY != lastY && blocker) {
        blocker = false;
    }

    lastY = thisY;

    if (!blocker) {
        if (windowHeight + thisY >= docHeight) {
            blocker = true;
            window.scroll(0, 0);
            lastY = 0;
        } else if (thisY === 0) {
            blocker = true;
            window.scroll(0, docHeight - windowHeight);
            lastY = docHeight - windowHeight;
        }   
    }
};

initialize = function() {
    setDocHeight();
    setWindowHeight();
    setInterval("infiniteScroll()", 1);
};

if (IE) {
    window.attachEvent('onresize', setWindowHeight);
    window.attachEvent('onload', initialize);
} else {
    window.addEventListener('resize', setWindowHeight, false);
    window.addEventListener('load', initialize, false);
}

$(document).ready(function() {
    var origDocHeight = document.body.offsetHeight;
    var clone = $("body").contents().clone();
    clone.appendTo("body");
    clone.prependTo("body");

    $(document).scroll(function() {
        var scrollWindowPos = $(document).scrollTop();

        if (scrollWindowPos >= origDocHeight) {
            $(document).scrollTop(0);
            lastY = 0;
            blocker = true;
        } else if (scrollWindowPos <= 0) {
            $(document).scrollTop(docHeight - windowHeight);
            lastY = docHeight - windowHeight;
            blocker = true;
        }
    });
});
</script>