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

【问题标题】：How to get scroll position and document height then run a function and update document height again?如何获取滚动位置和文档高度然后运行函数并再次更新文档高度？
【发布时间】：2021-08-25 00:51:49
【问题描述】：

我的文档高度是 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);
            }
        })
    })
})();

【问题讨论】：

我有一些问题，1. 期望 pageHeight 值真的可以通过 window.height 减去 body.height 获得吗？ 2. 你有没有试过用 window.scroll 的值代替 scroll.on() 的滚动值？

标签： javascript jquery locomotivejs locomotive-scroll

【解决方案1】：

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

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

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

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

下面的 sn-p 是一个示例，展示了当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();

&lt;main /&gt;

【讨论】：