Javascript — JS автопрокрутка до дна не работает правильно

Это как бы два вопроса в одном, но это просто изменение одного и того же сценария, поэтому я надеюсь, что никто не будет возражать, вы поймете, что я имею в виду …

В рамках функции сообщений я отображаю все сообщения, используя приведенный ниже скрипт, и обновляю их каждые пару секунд, используя JS:

<div class="list-group-message" style="overflow-y: scroll;height:385px;width:680px">
<div id="content">



<?
$res6=mysqli_query($conn, "SELECT * FROM ap_messages WHERE conversation_id = '$conversation_id' ORDER BY time_sent ASC");
while($row6=mysqli_fetch_array($res6))
{
$me_message = $row6['message'];
$me_message_id = $row6['message_id'];
$me_sender_id = $row6['sender_id'];
$todaysdate = date('d/m/Y');
$me_time_sent_date = date('d/m/Y', strtotime($row6['time_sent']));
$me_time_sent_date_and_time = date('d/m/Y H:i:s', strtotime($row6['time_sent']));
$me_time_sent_time = date('H:i', strtotime($row6['time_sent']));
if($todaysdate == $me_time_sent_date){
$me_time = ''.$me_time_sent_time.'';
} else {
$me_time = ''.$me_time_sent_date.' '.$me_time_sent_time.'';
}


$me_time_read = $row6['time_read'];
$res7=mysqli_query($conn, "SELECT * FROM ap_users WHERE user_id = '$me_sender_id'");
while($row7=mysqli_fetch_array($res7))
{
$me_first_name = $row7['first_name'];
$me_last_name = $row7['last_name'];
$me_display_img = $row7['display_img'];
}

mysqli_query($conn, "UPDATE ap_messages SET time_read = NOW() WHERE message_id = '{$me_message_id}' AND time_read = '0000-00-00 00:00:00' AND conversation_id = '$co_conversation_id' AND sender_id != '$user_id'");
?>




<div class="media" style="max-width: <? echo $screenwidth; ?>px;">
<div class="media-left">
<a href="#">
<img src="userimg/<? echo $me_display_img; ?>" alt="user" width="64px" height="64px" hspace="10px" class="media-object" align="left">
</a>
</div>
<div class="media-body" style="position: relative !important;">
<div style="display:inline"><b><a href=""><? echo ''.$me_first_name.' '.$me_last_name.''; ?></a></b></div> <div align="right" style="float:right; display:inline"> <? echo $me_time; ?> </div><br>
<? echo $me_message; ?>
</div>
</div>

<?
}
?>



</div>
</div>
<form action="" method="post" id="reply" name="reply" onsubmit="loadDoc()">
<div class="form-group">
<textarea class="form-control" rows="3" cols="80" id="message" name="message" placeholder="Send a reply..."></textarea>
<input type="hidden" id="conversation_id" name="conversation_id" value="<? echo $co_conversation_id; ?>">
<input type="hidden" id="sarssystem" name="sarssystem" value="<? echo $sarssystem; ?>">
<input type="hidden" id="user_id" name="user_id" value="<? echo $user_id; ?>">
</div>
<div class="form-group" align="right">

<div class="btn-group" align="left" style="float:left">
<button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="glyphicon glyphicon-cog" aria-hidden="true"></span> <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="messages.php?convoid=<? echo $co_conversation_id; ?>&del=check">Delete Conversation</a></li>
<li><a href="#">Visit Profile</a></li>
<li><a href="#">Report User</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Change Display Photo</a></li>
</ul>
</div>

<button type="reset" class="btn btn-default btn-sm">Cancel</button>
<button type="submit" class="btn btn-primary btn-sm">Send Message</button>
</div>

<script>
setInterval(function() {
$("#content").load(location.href+" #content","");
}, 5000);
</script>

Справа вверху вы можете увидеть мою функцию полосы прокрутки:

<div class="list-group-message" style="overflow-y: scroll;height:385px;width:680px">

Который я автоматически прокручиваю на дно, используя этот код из моего assets/js папка:

$(".list-group-message").animate({ scrollTop: $(document).height() }, "fast");
return false;

Который почти делает свое дело, хотя я получаю различные ошибки с этой системой автоматической прокрутки.

• Если разговор начинает создавать слишком много сообщений (около 10 дней), автопрокрутка будет прокручиваться только до середины разговора или около того.
• Если ответ добавлен, когда DIV обновляется, полоса прокрутки остается на предыдущем сообщении и не будет автоматически корректироваться, чтобы показать это новое сообщение.
• При использовании дополнения по времени для автоматического обновления автопрокрутки, оно начинается только после начального времени запуска, а не при перезагрузке страницы & все еще возникают проблемы с первыми двумя проблемами & Вы не можете просматривать свои сообщения, поскольку они будут обновляться, и вы будете терять свое место каждые 5 секунд.

Есть ли способ, которым я могу бороться с этими проблемами вообще, или это то, с чем мне придется мириться при использовании этого метода?