次の場合、ウェイポイント（Jqueryプラグイン）を無限スクロールにするにはどうすればよいですか？

Question

私はWaypoints Jqueryプラグインを使用しています：http://imakewebthings.github.com/jquery-waypoints/#documentation

私の問題は、ウェイポイントに達するとコンテンツを動的にロードしたいということです。

構造など、ウェイポイントに到達したとき、私はそれの前でより多くのコンテンツをロードしたい...最初は、コンテンツは、動的にロードされ、その後、私は最後にウェイポイントをしたい：

<div class="viewport"> 
    <div class="viewport-content"> 
    <div id="messages"> 
     /* {messages loaded here} */ 
    </div> 
    /* #waypoint added after messages loaded via appendTo('.viewport-content') */ 
    <div id="waypoint"></div> 
    </div> 
</div> 

ビューポート/ビューポートの内容は、CSSを介してスクロール可能領域を形成します。最初のメッセージがロードされた後にappendToを使用してウェイポイントを追加しました。そうでない場合、ウェイポイントは一番上にあり、ヒットしました。しかし、最初のメッセージを読み込んだ後にappendToを使用すると、スクロールしても正しく動作しません。ここで

は、ウェイポイントに関しては私の現在のJSです：

var opts = { 
    offset: 'bottom-in-view', 
    context: '#central-pane .viewport-content', 
}; 

$('#waypoint').waypoint(function(event, direction) { 
    alert("You've hit my waypoint! ow!"); 
    $('#messages').append($loading); 
    messagesLoad(); /* loads more messages via appendTo('#messages') */ 
    $('#waypoint').waypoint(opts); 
}, opts); 

私はこの仕事を得ることができる方法上の任意のアイデア？

Answer 1

".viewport-content"にウェイポイントを添付して、 "ボトム・イン・ビュー"オプションを保持してみませんか？このようにしてコンテンツが読み込まれると、下部がプッシュアウトされ、さらにスクロールすると、下部が表示されたときにイベントが再開されます。

Answer 2

私は私のページにやったことだ：

var opts = { 
    offset: '110%', 
    context: '#central-pane .viewport-content' 
}; 

$('#waypoint').waypoint(function(event, direction) { 
    alert("You've hit my waypoint! ow!"); 
    $('#messages').append($loading); 
    if(direction === 'down') { 
     messagesLoad(); /* loads more messages via appendTo('#messages') */ 
    } 
    $.waypoints('refresh'); 
}, opts); 

方向がダウンしている場合は一番下に達すると確認される前に、私はロードをトリガするために110％を使用。