How to get scroll position and document height then run a function and update document height again?

Question

My document height is 11886 and scroll position when I scroll to the bottom of the document is 9542.

I have a function I want to run when I scroll to the bottom of the document that will increase the size of the document again and load in more content. I then need to update the document height and allow the user to keep scrolling down.

When I reach the bottom again I want to run the function and update the document height.

Using Locomotive.js scroll. Const scroll is creating the scroll functionality.

(function () {
    const scroll = new LocomotiveScroll({
        el: document.querySelector('[data-scroll-container]'),
        smooth: true,
        class: 'aos-animate',
    });

    $(window).on("load", function () {
        scroll.update();
    });


   
        let height = $(document).height();
        console.log(height);

        scroll.on('scroll', (position) => {
            // let scroll_position = position.scroll.y;
            // console.log(scroll_position);
            const pageHeight = $('body').height() - $(window).height();
            let scrollPos = position.scroll.y;
            let scrollPercentage = (scrollPos * 100) / pageHeight;
            let finalPercentage = Math.ceil(scrollPercentage);

            console.log(finalPercentage);


            if(finalPercentage == 100) {
                setTimeout(() => {
                    my_repeater_show_more();
                    scroll.update();
                    $('.mouse-follow').each(function (index, el) {
                        var html = $(this).data('content');
                        $(el).mousefollow({
                            html: html,
                            className: 'js-follow',
                        });
                    });
                }, 1000);
            }
        })
    })
})();

Answer 1

In looking at your code, it looks like you are trying to calculate a percentage of scroll position in relation to the total page height. Then when that percentage reaches 100%, to call the method that loads more content; an infinite scroll effect.

Try using the document.documentElement properties on your scroll event listener to get the scrollTop, scrollHeight, clientHeight values.

Try using this to calculate the percentage in your scroll event listener:

const {scrollTop, scrollHeight, clientHeight} = document.documentElement;
const finalPercentage = Math.round((scrollTop + clientHeight) / scrollHeight * 100);

The snippet below is an example showing how you can generate new pages when the finalPercentage reaches 100.

const qs = selector => document.querySelector(selector);
const height = Math.round(document.documentElement.clientHeight / 2);
const width = Math.round(document.documentElement.clientWidth / 3) - 15;
let currentPage = 1;

function addPage() {
  const pageContent = document.createElement(`div`);
  for (var i = 0; i < 12; i++) {
    pageContent.innerHTML += `
    <img src="https://via.placeholder.com/${width}x${height}.png?text=Page ${currentPage}">`;
  }
  pageContent.innerHTML += `<hr>`
  qs(`main`).appendChild(pageContent);
}

window.addEventListener("scroll", () => {
  const {scrollTop, scrollHeight, clientHeight} = document.documentElement;
  const finalPercentage = Math.round((scrollTop + clientHeight) / scrollHeight * 100);
  if (finalPercentage == 100) {
    currentPage++;
    addPage();
  }
},{ passive: true });

addPage();

<main />