jquery - JScrollpane: 下にスクロールするときに要素を追加

Question

JScrollpane を ajax に適用しました。今度は、ajax を介してその下にスクロールするとき<ul> <li>にさらに追加する必要があります。<li><ul>

何か案が？

ティア・ジャヤ

Answer 1

「jsp-scroll-y」イベントを使用する必要があります。このイベントは、ユーザーが y バーをスクロールするとトリガーされます。イベントの詳細はこちら. ブラウザーは毎回このイベントを複数回トリガーするため、jQuery の通常の .bind または .on を使用する代わりに、jQuery デバウンス プラグインを使用して、ブラウザーが関数を 200 ミリ秒ごとに複数回起動するのを防ぎます。JQuery デバウンスはこちらからダウンロードできます。したがって、構造が次のようになっているとしましょう。

<div id="container">
  <ul id="list">
    <li> ... </li>
    <li> ... </li>
    <li> ... </li>
  </ul>
</div>

JQuery を使用して目標を達成するための JavaScript は次のようになります。

var container = $('#container');
var list = $('#list');

// initialize the scroll pane
container.jScrollPane();

// bind the event
container.debounce('jsp-scroll-y', function(event, scrollPositionY, isAtTop, isAtBottom) {
    if (isAtBottom) {
        $.ajax({
            type: 'GET',
            async: true,
            dataType: 'html',
            url: '/path/to/more/elements',
            success: function(data) {
                if (data.length) {
                    list.append(data);
                    container.jScrollPane('reinitialise');
                } else {
                    container.unbind('jsp-scroll-y');
                }
            },
        });
    }
}, 200);

もちろん、このシナリオでは、'/path/to/more/elements' は li 個の要素を返す必要があり、すべてを受け取り終わったときには何も返しません。AJAX 成功関数でインクリメントするページ インデックスを使用して、新しい要素を取得します。ajax 呼び出しまたは URL のデータを使用して、このページ インデックスをサーバーに送信します (サーバーの実装によって異なります)。