Streaming live at 10am (PST)

Loop Scroll Endless


#1

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?


#2

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


#3

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


#4

How is it glitchy on mobile?