0

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

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

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

使用Locomotive.js滚动。const scroll 正在创建滚动功能。

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

1 回答 1

0

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

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

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

const {scrollTop, scrollHeight, 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, scrollHeight, clientHeight} = document.documentElement;
  const finalPercentage = Math.round((scrollTop + clientHeight) / scrollHeight * 100);
  if (finalPercentage == 100) {
    currentPage++;
    addPage();
  }
},{ passive: true });

addPage();
<main />

于 2021-06-08T04:10:09.887 回答