2010-12-03 10 views
1

jScrollPaneは、デフォルトのブラウザスクロールバーを変更する素晴らしいjQueryプラグインです。 jScrollPaneを使用するチャットアプリケーションを開発しています。私は最大のスクロールの高さを決定することができないという事実を除いてこれまでのところ素晴らしいです。私がやろうとしていることは次のとおりです。jScrollPaneでスクロールの高さを最大にする方法は?

$(function() 
{ 
    $('#chatPane').jScrollPane(); 
    var api = $('#chatPane').data('jsp'); 
    setInterval(function() 
    { 
     $.ajax(
     { 
      url: "Home/GetMessage", 
      type: "POST", 
      success: function (response) 
      { 
       // This next line is where the issue occurs. I need to check if the current scroll position is equal to the max scroll position. This is to implement the auto scroll if the user has scrolled to the bottom of the chat. 
       var atBottom = (api.getContentPane().getContentPositionY() == api.getContentPane().getMaxScrollHeight()??????); 
       api.getContentPane().append(response); 
       api.reinitialise(); 
       if (atBottom) 
        api.scrollToBottom(); 
      }, 
      error: function (xhr, textStatus, errorThrown) 
      { 
       alert(textStatus); 
      } 
     }); 
    }, 1000); 
}); 

getMaxScrollHeightは存在しません。最大スクロールの高さを決定する方法が必要です。

EDIT:私はajaxの成功関数に以下の変更を加えて動作させました。しかし、誰かが下にスクロールするより良い方法を知っている場合は、現在の位置を取得し、その後、前の位置にスクロールすることは非常に感謝しています。あなたが試みることができる

  success: function (response) 
      { 
       var currentPosition = api.getContentPositionY(); 
       api.scrollToBottom(); 
       var maxPosition = api.getContentPositionY(); 
       api.scrollToY(currentPosition); 
       var atBottom = (currentPosition == maxPosition); 
       api.getContentPane().append(response); 
       api.reinitialise(); 
       if (atBottom) 
        api.scrollToBottom(); 
      } 

答えて

1

一つの解決策は、scrollToBottom()をシミュレートして、シミュレーション前の値と結果のgetContentPositionY()を比較することです。変更されていない場合、ユーザーは既に下部にありますので、応答コンテンツを追加した後にscrollToBottom()を「本物」として呼び出してください。

シミュレーションを実行するには、元のオブジェクトを複製し、メモリ内で修正することができます。詳細はhttp://api.jquery.com/clone/を参照してください。例:

var simulatedPane = $('#chatPane').clone(); 
simulatedPane.jScrollPane(); 
var simulatedApi = simulatedPane.data('jsp'); 

次に、success()関数では、シミュレーションにsimulatedApiを使用します。

+0

興味深い考えです。スクロール・ボトム()をシミュレートする方法はありますか? – Chev

+0

私は2つの方法が考えられます:最初に、ページ上の実際のオブジェクトと同じプロパティを持つメモリ内のJavascriptコピーを作成し、その上でコマンドを実行します。 2番目の方法は、現在のスクロール位置を保存し、ライブオブジェクトに対してコマンドを実行して、前のスクロール位置を復元することです。これは、UIがジャンプする可能性がありますので、使用可能かどうか確認するためにテストする必要があります。 – ChessWhiz

+0

もう1つはできるが、UIジャンプが起こる可能性が高いことに同意する。メモリ内オブジェクトを作成するためのコードサンプルを使用して答えを更新できますか? – Chev

1

私は既に解決策を見ています。別のアプローチは、jsp-scroll-yイベントのリスナーを追加することがあります

http://jscrollpane.kelvinluck.com/events.html

このリスナーはisAtTopとisAtBottomのためのブール値を渡されます。これを変数に格納して、スクロール区画を再初期化する前に変数の状態をチェックすることができます。

長期的あなたがAPIにいくつかのメソッドを追加する機能要求を追加することができれば、それは素晴らしいことだ:isAtTopisAtBottomisAtLeftisAtRight - あなたはgithub issues listにそれを追加した場合、私が得るとき、私はそれを追加しますチャンス。

+0

これははるかに理にかなっており、「ハッキー」ではありません。このイベントのリスナーを追加します。また、これらのプロパティはプラグインに大きく追加されるので、質問したようにgithubに問題を追加します。 – Chev

+0

私はこの銃を飛ばしたようです。完璧に聞こえるが、そうではない。それは非常にバグです。イベントが発生するコンテナを追加するたびに私はあらゆる種類のものを試しましたが、isAtBottomプロパティは非常に信頼できるとは思われません。私はハックにこだわる必要があるように見えます。それはとにかくコードがはるかに少なかった。しかし、ありがとう! – Chev

+0

申し訳ありません - ドキュメントのパラメータの順序が間違っているようです。 isAtBottomは第4のパラメータです。この実例を見て​​ください。下にスクロールすると下にスティックされます:http://www.jsfiddle.net/vitch/NDFy6/ – vitch

関連する問題