18

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

既存のページング機能で動作するエンドレス スクロールを実装する方法を知りたいです。現在、「さらに読み込む」ボタンがあり、クリックすると次の 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>
4

1 に答える 1

40

最も簡単な方法は、一番下に到達したかどうかを確認し、「もっと読み込む」ボタンでクリックイベントをトリガーすることです。

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

上記のスクリプトは単なる例です。本番環境では使用しないでください。

アップデート

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

update2

...そして最善の方法: ユーザーがそうする場合に何をすべきかをユーザーに決定させます (この場合、ユーザーは次のページに到達するのではなく、ページの最後に到達するために下にスクロールします) ;)

于 2013-03-03T04:37:06.973 に答える