防止scrollTopスプライト（下）スクロールバーを使用

Question

に/クリックされたとき、私は新しいメッセージがロードされると、それはDIV（#chatlist）の一番下にスクロールだけで楽しい

のために、少しチャットを作ってるんだものすべてのメッセージを保持します。しかし、divのスクロールバーを使用するとスクロールダウンしようとします（オーバーフロー：auto）。 どうすればこの問題を回避できますか？

私はここに私のコードは、これまで運がなくて、

を様々なノークリックの検出方法を試してみました。間隔は、すべてのいくつかの秒、それを発射：

var chatlist = $('#chatlist'); 

function chatinterval() { 
    $.ajax({ 
     type: "POST", 
     url: '/chatinterval.php', 
     data: "dbtime=" + latestchat, 
     dataType: "json", 
     success: function (data) { 
      if (data) { 
       chatlist.append(data.dbtext); 
       latestchat = data.dblatest; 
       // this part makes it scroll down 
       chatlist.scrollTop(chatlist[0].scrollHeight - chatlist.height()); 
      } 
     } 
    }); 
} 

Answer 1

あなたはフラグ変数（例えばclicked）を制御するためにmousedownとscrollイベントを使用することができます。スクロールバーをクリック解除するとmouseupが起動しないので、ユーザが手動でスクロールを停止するまで待機するように、すべてのscrollイベントでタイムアウト（この例では5秒）を設定できます。だから、最終的なコードは次のようになります。

var chatlist = $('#chatlist'); 

var timer = null; 
var clicked = false; 

chatlist.on({ 
    mousedown: function() { 
     clicked = true; 
    }, 
    scroll: function() { 
     clearTimeout(timer); 
     timer = setTimeout(function() { 
      clicked = false; 
     }, 5000); 
    } 
}); 

function chatinterval() { 
    $.ajax({ 
     type: "POST", 
     url: '/chatinterval.php', 
     data: "dbtime=" + latestchat, 
     dataType: "json", 
     success: function (data) { 
      if (data) { 
       chatlist.append(data.dbtext); 
       latestchat = data.dblatest; 
       // this part makes it scroll down 
       if (!clicked) { 
        chatlist.scrollTop(chatlist[0].scrollHeight - chatlist.height()); 
       } 
      } 
     } 
    }); 
} 

DEMO：http://jsfiddle.net/rkUt9/