メッセージdiv全体が交換されたときのチャットルームのスクロールの問題

Question

#messagearea divに表示されている新しいメッセージがxミリ秒ごとに自動的に更新されるチャットルームを作成して、下にスクロールします。これは私がこれを行うために使用している擬似コードです。

function fetch_messages{ 
    loadmsgs(); 
    $("#messagearea").animate({ scrollTop: 0}, 300); 
} 

新しいメッセージが読み込まれるたびに、メッセージは一番下にスクロールします。

しかし、これには問題があります。ページ上のメッセージを取得して更新するたびに、ユーザーがスクロールして下にスクロールし続けるので、ユーザーは上にスクロールできません。ユーザーがスクロールアップしようとすると、JavaScriptは1000ミリ秒ごとにスクロールバーを下に押し下げます。

新しいメッセージが表示されたら（ユーザーがすでに一番下までスクロールされた場合）だから私はしたい...

• #messageareaは
• 、下へスクロールし#messageareaを1000ミリ秒ごと
• を更新#messageareaが更新されるたびに、Webブラウザが下にスクロールしてもスクロールアップが許可されます

全体の#messagearea、悪い考え、または私は.appendする必要がありますか？

Answer 1

アイデア、私はこのような状況が
ある避けるために使用ユーチューブ 実際https://www.youtube.com/watch?v=FIuyZn5fNs4&feature=youtu.be

何で

その "新しいメッセージのサウンドを果たしました"あなたは達成しようとしているほとんどのユーザーのために非常に不快になります becaus上記のいくつかのメッセージを読んでいる間、自動的に新しい更新の下にスクロールします。

簡単な解決策は

は、新たな上、ユーザーに通知するために、ユーザーはシングルクリックと（再生音のような）いくつかのメカニズムに一番下までスクロールすることができた上にボタンを追加しますメッセージ。

私はappendを使用し、ちょうどスクロールバーが下にない場合は、常に考慮に入れることができ、最新の見えないメッセージ