Loop Scroll Endless


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


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


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

Here is the link to my webflow project


the code I used is this:

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() {
  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();


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

        if(scrollWindowPos >= origDocHeight ) { 
        if(scrollWindowPos <= 0 ) { 

How can I get it to scroll smoothly on mobile?

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

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

How is it glitchy on mobile?

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.

Anyone have any input for this?

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/

1 Like

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

1 Like

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


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.

1 Like

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

1 Like

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

@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 :upside_down_face:

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

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

1 Like


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

My best, Dan

1 Like

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