如何获取滚动位置和文档高度然后运行函数并再次更新文档高度？

如何解决如何获取滚动位置和文档高度然后运行函数并再次更新文档高度？

我的文档高度为 11886，滚动到文档底部时的滚动位置为 9542。

当我滚动到文档底部时，我想运行一个函数，该函数将再次增加文档的大小并加载更多内容。然后我需要更新文档高度并允许用户继续向下滚动。

当我再次到达底部时，我想运行该函数并更新文档高度。

使用 Locomotive.js 滚动。 常量滚动正在创建滚动功能。

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

解决方法

在查看您的代码时，您似乎正在尝试计算相对于总页面高度的滚动位置百分比。然后当该百分比达到100%时，调用加载更多内容的方法；无限滚动效果。

尝试使用滚动事件侦听器上的 document.documentElement 属性来获取 scrollTop,scrollHeight,clientHeight 值。

尝试使用它来计算滚动事件侦听器中的百分比：

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

下面的代码段是一个示例，展示了如何在 finalPercentage 达到 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,clientHeight} = document.documentElement;
  const finalPercentage = Math.round((scrollTop + clientHeight) / scrollHeight * 100);
  if (finalPercentage == 100) {
    currentPage++;
    addPage();
  }
},{ passive: true });

addPage();

<main />