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 に答える