無限スクロールを実装したい

Question

前提・実現したいこと

下にスクロールしていくと、次の要素が表示されるようにしたいです。
ドキュメント自身がスクロール対象です。
すると、「window.onscroll」を使えば簡単にできるらしいのですが・・・

発生している問題・エラーメッセージ

ググりながら色々と弄り回しているうちに、一度はできたのですが、後から順に表示したい要素が一度に出てきてしまうので、
ひとつずつ表示させたくて、更に弄り回しているうちに、どこをどうやったか分からなくなってしまいました。
最も中心に参照していたページは、このページで、「ドキュメント内でスクロールする場合」です。

一旦、コードを最初の方の状態に戻してみましたが、どこをどうやったか思い出せません。
アドバイスをください。

該当のソースコード

            var targetElement; // 対象とする要素

            window.onscroll = function(){
                var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

                // ウィンドウのビューポートの下端の位置
                var bottom = scrollTop + document.documentElement.clientHeight;

                // 対象とする要素の上端の位置
                var top = targetElement.offsetTop;

                if( top < bottom )
                {
                    // 可視範囲に入ったときの処理
                    leftHtmlIndex += 1;
                    if(leftHtmlIndex < leftHtmlCount){
                        displayEmbedcodeHtml(leftHtmlIndex);
                    }else{
                        document.getElementById('scrollBottomMessage').innerHTML = '最後まで表示しました。';
                    }
                }
            }

<div id="scrollTopMessage">
</div>
<div id='tweetBackList'>
</div>
<div id="scrollBottomMessage">
</div>

「leftHtmlIndex」は、初期状態で表示される要素で配列の「1」からスタートしてます。(コードの大半は関係ないと思いますので省略してます)
「displayEmbedcodeHtml」が要素を書き出していて配列の番号を増やすことによって次の要素を書き出しています。
要素は、「<div id='tweetBackList'>」の子要素として追加されていきます。
あとから現れる要素の高さは不揃いです。

試したこと

色々と弄り回してみたのですが、どこをどうやったら完成に近づいたのか分からなくなってしまいました。
すみません。＿|￣|○

補足情報（FW/ツールのバージョンなど）

サーバー：ロリポップ
ブラウザ：Firefox 91.0.2 (64 ビット)
クライアント：macOS Mojave 10.14.6

Comments

[yambejp]

無限スクロールの仕様をきちんと説明してください
通常無限スクロールというのは次のページを非同期で受け取り続ける
ことで永続的にスクロールする仕組みです

[One_of_Arthur]

先の文章と一部重複しますけれど、以下のように考えています。
・Twitterのタイムラインみたいなものを想定しています。
・下にスクロールしていくと、次の要素が表示されるようにしたいです。
・要素を一度に表示するのではなく、ひとつずつスクロールに合わせて表示したいです。
・「無限」と言っても、要素に限りがあり全て表示されたら、それ以上スクロールは不要です。
よろしくお願いします。

Answer 1

自己解決しました。

            window.onscroll = function(){
                var targetElement = document.getElementById('tweetBack-' + String(leftHtmlIndex));      // 対象とする要素

                var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;


                // ウィンドウのビューポートの下端の位置
                var bottom = scrollTop + document.documentElement.clientHeight;


                // 対象とする要素の上端の位置
                var top = targetElement.offsetTop;


                if( top < bottom )
                {
                    // 可視範囲に入ったときの処理
                    leftHtmlIndex += 1;
                    if(leftHtmlIndex < leftHtmlCount){
                        displayEmbedcodeHtml(leftHtmlIndex);
                    }else{
                        document.getElementById('scrollBottomMessage').innerHTML = '最後まで表示しました。';
                    }
                }
            }

対象とする要素の代入を「.onscroll」時の関数の中に入れ、その時点で表示されている最後の要素を「targetElement」に代入するようにしました。