Loop Scroll Endless

Design help Custom code
17

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>