私は私たちのアプローチを24579152でJQueryを使用して無限のスクロールを実装する方法を共有し、どのように他のサイトに適用できると思いました.
私たちのケースでは、私たちのページは、“ロード日”をクリックして“ロード翌日”ボタンをクリックしている場合は、前の4日間からコンテンツを表示するには、ページの下部に到達するたびにボタンをクリックします.
https://sideprojects.net
私たちがしたかったことは、ページの下部にスクロールするとすぐに、このチュートリアルがカバーするものであるとして、次の数日間を表示されました.

セットアップ

必要条件

Paginationの何らかの種類のウェブサイト.

あなたが既にいないならば、あなたのウェブサイトにjQueryを加えてください.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">

ボタンにクラスを追加します.

1 )ウィンドウスクロールイベントを作成する

//Infinite scroll
$(window).on("scroll", function() {

});

2 )ドキュメント全体の高さの変数を作成し、スクロール位置を決定する変数を作成する

スクロールイベントの内部で、2つの変数を作成します.scrollheightとscrollposと呼びます.

var scrollHeight = $(document).height();
var scrollPos = $(window).height() + $(window).scrollTop();

3 )いくつかの数学をしましょう！

覚えておいてください:私たちは、ユーザーがページの下にスクロールするたびに、イベントを発射したいです.
以下の条件文を使ってページの一番下に到達したかどうかを確認できます.

if ((scrollHeight - scrollPos) / scrollHeight == 0) {

条件文が満たされるならば、我々はイベントが引き起こされることを望みます.
この場合、私たちのボタンのクラス名はです.ボタンをロードします.そのボタンはページの最後に到達するとクリックされます.

if ((scrollHeight - scrollPos) / scrollHeight == 0) {             
   $('.load-more-days-button').click();
}

それですべてをまとめると、

//Infinite scroll
$(window).on("scroll", function() {
  var scrollHeight = $(document).height();
  var scrollPos = $(window).height() + $(window).scrollTop();
  if ((scrollHeight - scrollPos) / scrollHeight == 0) {
    $('.load-more-days-button').click();
    console.log("bottom!");
  }
});

それで?私たちはできますか!?ええ、はい.
動く.
しかし、それは偉大でありません.なぜ?

それはあなたのスクロールバーは、イベントを起動する前に最後に触れるようにすべての方法をスクロールする必要があります.

それはモバイルで不十分に動作します.私はそれが常に携帯電話上でトリガされないことに気づいたし、ページの下部に達しているという事実を拾う-ときでも、すべての方法をスクロールした.

それで修正しましょう.
この行を置き換えましょう

if ((scrollHeight - scrollPos) / scrollHeight == 0) {

代わりに

if(((scrollHeight - 300) >= scrollPos) / scrollHeight == 0) {

この行のコードは、ページの下部にある300ピクセル以下のときにスクロールイベントをトリガーします.(必要に応じて300を設定できます)
これはデスクトップとモバイルで素晴らしい作品!

物を包む

すべてをまとめると、コードはおそらく次のようになります.

//Infinite Scroll
$(window).on("scroll", function() {
 //page height
 var scrollHeight = $(document).height();
 //scroll position
 var scrollPos = $(window).height() + $(window).scrollTop();
 // fire if the scroll position is 300 pixels above the bottom of the page
 if(((scrollHeight - 300) >= scrollPos) / scrollHeight == 0){
   $('.load-more-days-button').click();
  }
});

ライブ例を見ることができます.