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;

这就是诀窍，尽管我在这个自动滚动系统中遇到了各种错误。

如果对话开始构建太多消息（大约10ish），则自动滚动只会滚动到对话的中间或等等。
如果添加了回复，则刷新DIV时，滚动条会保留上一条消息，并且无法自动调整以显示此新消息。
使用定时添加自动刷新自动滚动，它仅在初始启动时间之后开始，而不是在页面重新加载＆amp;仍然会出现前两个问题的问题＆amp;你无法浏览你的消息，因为它会刷新，你每隔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自动滚动到底部无法正常运行

1 个答案: