JS 自动滚动到底部无法正常工作

Question

这是一个问题中的两个问题，但它只是改变了同一个脚本，所以我希望没有人会介意，你会明白我的意思...

在我的消息功能中，我使用下面的脚本显示所有消息，并使用 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 秒就会失去你的位置。

有什么方法可以完全解决这些问题，还是我在使用此方法时必须忍受的问题？

Answer 1

下面是一些可能对您有帮助的代码：

x = 0;  //horizontal coord
y = document.height; //vertical coord

setTimeout(function(){
  window.scroll(x,y);
},2000); //run every two seconds

我认为这将帮助您完成所需的工作： http://scripterlative.com/files/autodivscroll.htm

但如果您喜欢自己编写东西，那么查看代码演示会有所帮助。

你可能也会喜欢这个：http://plugins.compzets.com/animatescroll/#

JS 自动滚动到底部无法正常工作

JS autoscrolling to bottom isn't functioning correctly

javascript

php

autoscroll