jqueryの読み込み機能の最中にスクロールする方法

Question

私は少し難しかったです。コンテンツを読み込むためにjqueryのスクリプトが必要ですが、ページの上端から下端まで狂ったようにバウンスすることなく、下にロードする必要があります。

注：コンテンツの読み込みはうまくいきますが、もちろん、ユーザーがスクロールしない限り、常に下に読み込むようにしてください。私はすでにスクロール検出機能を持っていますが、私はそれがデフォルトの底になるのを助ける必要があります。私はそれがデフォルトとして底に残っているに.LOADセクション内にあるように、スクロールが必要

var refreshId = setInterval(function() 
{ 
    $('#chatter').load('chat-panel.php'); 
}, 1500); 

：

は、ここに私のスクリプトです。私のメッセージは、別のdivタグに格納されているが

は

<div id="messages"></div> 

はまた、このタグ内に、私は空白のままに理由があるデータベースから収集されたいくつかのPHPのデータであることに注意してください。

これは、全体的な#chatterのhtmlです：

<table style="height: 100%; max-height: 430px; width: 100%;" id="chattytable" border="1"> 
    <tbody> 
    <tr> 
     <td valign="bottom" id="inc"><?php include("chat.php"); ?></td> 
     <td width="20%" valign="top"><?php include("users.php"); ?></td> 
    </tr> 
    </tbody> 
</table> 

chat.php含まれ、次のとおりです

<table style="<?php if(isset($_SESSION["chat"])) { echo "table-layout:fixed; max-height:445px; height: 445px;"; } else { echo "height:70%;"; }?> width: 80%;" align="center" border="1"> 
    <tbody> 
     <tr> 
     <td><div id="chatter" style="height: 100%; width: 100%;"></div></td> 
     </tr> 
     <tr> 
     <td height="100;"><iframe id="sendit" frameborder="0" scrolling="no" src="message.php" style="width: 100%; height: 100%;"></iframe></td>  </tr> 
    </tbody> 
    </table> 

これは#chatter divの内側の負荷（チャット-panel.php）が何であります以下のためのコンテンツ：ここ

<div id="messages"></div> 

がCSSです：

<style type="text/css"> 
    #messages { 
     color: #514F4F; 
     overflow-y: scroll; 
     overflow-x: hidden; 
     height: 100%; 
     max-height: fit-content; 
    } 
    ::-webkit-scrollbar { 
    width: 7px; 
    height: 7px; 
} 
::-webkit-scrollbar-button { 
    width: 7px; 
    height: 7px; 
} 
::-webkit-scrollbar-thumb { 
    background: #31143d; 
    border: 0px none #ffffff; 
    border-radius: 100px; 
} 
::-webkit-scrollbar-thumb:hover { 
    background: #ffffff; 
} 
::-webkit-scrollbar-thumb:active { 
    background: #000000; 
} 
::-webkit-scrollbar-track { 
    background: #562176; 
    border: 0px none #ffffff; 
    border-radius: 100px; 
} 
::-webkit-scrollbar-track:hover { 
    background: #6a2075; 
} 
::-webkit-scrollbar-track:active { 
    background: #73287b; 
} 
::-webkit-scrollbar-corner { 
    background: transparent; 
} 
    #inc { 
     text-align: left; 
     overflow: hidden; 
     text-overflow: ellipsis; 
    } 
    #chat_wrap { 
     height: 100%; 
    } 
</style> 

私はレイアウトを適切に説明したかったので、混乱するかどうか迷ってください。私が尋ねるすべては、私はあなたがいる限り多くを学ぶためにここにいる、あなたは私のコーディングを判断してはいけないということです： `$（」：D

Answer 1

は一つの問題この

var refreshId = setInterval(function() 
{ 
    //$('#chatter').load('chat-panel.php'); 
    $('#messages').append('New Message<br>'); 
     $('html,body').animate({ 
    scrollTop: $('#messages').height() 
    }, 500); 
}, 1500); 

and here a fiddle