Continuous Looping Page (Not Infinite Scroll)

Question

I'm looking for resources that create scrolling functions like the ones found on these sites:
Outpost Journal
Unfold

Once the scroll bar hits the bottom of the page, I want it to loop back to the top. I'm familiar with with the infinite scroll, and this is not what I want. I've also found scripts that will write/add the same content to the bottom of the page, but none that loop back to the top of the page.

Yolk

Just make the scroll position = 0 once it's at the bottom of the page. – Peterson

Answer 1

Try this:

   $('document').ready(function() {
             $(document).scroll(function(){
             if(document.documentElement.clientHeight + 
             $(document).scrollTop() >= document.body.offsetHeight )$(document).scrollTop(0);
             });
          }); 

Tablespoon

Answer 2

if you want infinite scroll in both directions use

if (document.documentElement.clientHeight + $(window).scrollTop() >= $(document).height()) {
    $(document).scrollTop(0)
} else if ($(window).scrollTop() < 0) {
    $(document).scrollTop($(document).height())
}

(I know it's a late reply but it still helps users like me who just google stuff like this)

Enaenable

You code doesn't work for me, so I changed this part else if ($(window).scrollTop() < 0) by else if ($(window).scrollTop() < 1) – Coarctate

Answer 3

Here a solution that makes a duplicate of the body so the bottom and the top can be seen at the same time at a certain point so the transition is smoother.

$('document').ready(function() {

     // We need to duplicate the whole body of the website so if you scroll down you can see both the bottom and the top at the same time. Before we do this we need to know the original height of the website.
     var origDocHeight = document.body.offsetHeight;

     // now we know the height we can duplicate the body    
     $("body").contents().clone().appendTo("body");


     $(document).scroll(function(){ // detect scrolling

         var scrollWindowPos = $(document).scrollTop(); // store how far we have scrolled

         if(scrollWindowPos >= origDocHeight ) { // if we scrolled further then the original doc height
             $(document).scrollTop(0); // then scroll to the top
         }       
     });

 }); 

Overdevelop

Answer 4

mrida's answer was causing my browser to not be able to scroll, here is a modified version that worked for me:

  $('document').ready(function() {
    $(document).scroll(function(){
      if (document.documentElement.clientHeight + $(window).scrollTop() >= $(document).height()) {
        $(document).scrollTop(0);
      }
    });
  });

Perseverance

Answer 5

Forked from @clankill3r's answer, create two copy of body, prepend and append to the original body, then you can scroll the page in two direction endless.

$('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); 
         }        
    });
});

Tonsil

Answer 6

Adding loop scroll backwards, upgrading @clankill3r answer. It should be something like this.

$('document').ready(function() {

 // We need to duplicate the whole body of the website so if you scroll down you can see both the bottom and the top at the same time. Before we do this we need to know the original height of the website.
 var origDocHeight = document.body.offsetHeight;

 // now we know the height we can duplicate the body    
 $("body").contents().clone().appendTo("body");


 $(document).scroll(function(){ // detect scrolling

     var scrollWindowPos = $(document).scrollTop(); // store how far we have scrolled

     if(scrollWindowPos >= origDocHeight ) { // if we scrolled further then the original doc height
         $(document).scrollTop(scrollWindowPos + origDocHeight); // then scroll to the top
     } else if (scrollWindowPos == 0) { // if we scrolled backwards
         $(document).scrollTop(origDocHeight);
     }
 });
});

I'm using it horizontally and it's working just fine. Hope someone finds it useful.

Chronograph

Answer 7

Posted a similar question: https://mcmap.net/q/822333/-infinite-continuous-looping-scroll-on-mobile and found the answer via this pen: https://codepen.io/vincentorback/pen/zxRyzj

Here's the code:

<style>

html,
body {
  height: 100%;
  overflow: hidden;
}
  
.infinite {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.clone {
  height: 50vw;
}
  
</style>

<script>

    var doc = window.document,
    context = doc.querySelector('.infinite'),
    clones = context.querySelectorAll('.clone'),
    disableScroll = false,
    scrollHeight = 0,
    scrollPos = 0,
    clonesHeight = 0,
    i = 0;

    function getScrollPos () {
      return (context.pageYOffset || context.scrollTop) - (context.clientTop || 0);
    }

    function setScrollPos (pos) {
      context.scrollTop = pos;
    }

    function getClonesHeight () {
      clonesHeight = 0;

      for (i = 0; i < clones.length; i += 1) {
        clonesHeight = clonesHeight + clones[i].offsetHeight;
      }

      return clonesHeight;
    }

    function reCalc () {
      scrollPos = getScrollPos();
      scrollHeight = context.scrollHeight;
      clonesHeight = getClonesHeight();

      if (scrollPos <= 0) {
        setScrollPos(1); // Scroll 1 pixel to allow upwards scrolling
      }
    }

    function scrollUpdate () {
      if (!disableScroll) {
        scrollPos = getScrollPos();

        if (clonesHeight + scrollPos >= scrollHeight) {
          // Scroll to the top when you’ve reached the bottom
          setScrollPos(1); // Scroll down 1 pixel to allow upwards scrolling
          disableScroll = true;
        } else if (scrollPos <= 0) {
          // Scroll to the bottom when you reach the top
          setScrollPos(scrollHeight - clonesHeight);
          disableScroll = true;
        }
      }

      if (disableScroll) {
        // Disable scroll-jumping for a short time to avoid flickering
        window.setTimeout(function () {
          disableScroll = false;
        }, 40);
      }
    }

    function init () {
      reCalc();

      context.addEventListener('scroll', function () {
        window.requestAnimationFrame(scrollUpdate);
      }, false);

      window.addEventListener('resize', function () {
        window.requestAnimationFrame(reCalc);
      }, false);
    }

    if (document.readyState !== 'loading') {
      init()
    } else {
      doc.addEventListener('DOMContentLoaded', init, false)
    }

</script>

Camellia