Streaming live at 10am (PST)

Loop Scroll Endless

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?

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?

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

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:

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.

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?