Javascript/jQueryでDIV内で無限/無限のスクロールを実装する方法

Question

ここでは、無限スクロールの問題に対処するいくつかの質問があります。しかし、彼らのほとんどはプラグインを使用しています。

私は、既存のページング機能で動作する無限スクロールを実装する方法を知りたいと思います。現在、私は「もっと読み込み」ボタンをクリックし、クリックすると次の10項目を取り出してリストに追加します。これは、「もっと読み込み」ボタンがクリックされたときに行うのではなく、スクロール位置が下に来るときに起こりたいのです。また、このリストはメインページにはなく、DIV内にあります。 id 'pageNum'の隠しフィールドにページ番号を格納する。

$.ajax({ 
     type: "GET", 
     url: "/GetItems", 
     data: { 'pageNum': $('#pageNum').val() }, 
     dataType: "json", 
     success: function (response) { 
       $('#MyDiv ul').append(response.Html); 
       $('#pageNum').val(response.PageNum); 
      } 
     } 
}); 

#MyDiv 
{ 
    border:solid 1px #ccc; 
    width:250px; 
    height:500px; 
    overflow-y: scroll; 
} 

<div id="MyDiv"> 
    <ul> 
    <li>...</li> 
    ... 
    </ul> 
</div> 

Answer 1

最も簡単な方法は、あなたが底に達したかどうかを確認すると、あなたの「負荷より」 - ボタンでクリックし、イベントをトリガすることです。

$(window).on('scroll', function(){ 
    if($(window).scrollTop() > $(document).height() - $(window).height()) { 
     $("#load-more").click(); 
    } 
}).scroll(); 

上記のスクリプトは、単なる例であり、運用環境では使用しないでください。

更新

...とより良い方法は、関数を呼び出す代わりに、関数を呼び出すイベントをトリガすることです。アップデート2

...と最善の方法：ユーザーは、彼がしなければ行うことが何であるかを決めましょう（この場合には彼がいない次に到達するために、あなたのページの最後に到達するためにスクロールダウンpage）;）