Question

我创建了一个简单的聊天应用。我已经使用setTimeout每隔0.5毫秒刷新一次消息，并使用scrolltop将滚动条保持在底部。但问题是无法向上滚动消息div。

<?php
session_start();
?>
<html>  
  <head>  
       <title>Live Table Data Edit</title>  
       <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
       <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>  
  </head>  
  <body>  
           <div class="container">  
                <br />  
                <br />  
                <br />  
                <div class="table-responsive">  
                     <h3 align="center">You Are : <?php echo $_SESSION['name']; ?></h3><br />  
                     <div id="live_data"></div>                 
                </div>  
            <div id="messages" style="    border: 1px solid #ccc;
width: 350px;
height: 210px;
padding: 10px;
overflow-y:scroll;
display:none;"></div> 
            <div class="area" style="display:none">
            <textarea id="text" name="text"style="    border: 1px solid #ccc;
width: 350px;
height: 50px;
padding: 10px;" ></textarea>
            <input type="submit" id="sub" name="sub" value="Send" />
                </div>
           </div>  


<script>
var currentID = null;
var chatTimer = null;

function fetch_data() {
$.ajax({
url: "select.php",
method: "POST",
success: function(data) {
  $('#live_data').html(data);
  //fetch_chat();
    }
  });
}

function fetch_chat() {
$.ajax({
url: "fetch_chat.php",
method: "POST",
data: {
  id: currentID
},
dataType: "text",
success: function(data) {
  $("#messages").show();
  $('#messages').html(data);
  $("div.area").show();

  $("#messages").animate({ scrollTop: $(document).height() }, "fast");
  return false;
   chatTimer = setTimeout(fetch_chat, 500); //request the chat again in 2 seconds time     
    }

  });
}

$(document).ready(function() {

  $(document).on('click', '.first_name', function() {
   currentID = $(this).data("id1");
   //immediately fetch chat for the new ID, and clear any waiting fetch 
     timer that might be pending
   clearTimeout(chatTimer);
   fetch_chat(); 
 });

$("#sub").click(function() {
var text = $("#text").val();

$.post('insert_chat.php', {
  id: currentID,
  msg: text
 }, function(data) {
  $("#messages").append(data);
  $("#text").val('');
  });
});

fetch_data();//this will also trigger the first fetch_chat once it completes
   });
   </script>
  </body>  
  </html>

当我将setTimeout放在scrolltop下面时，return false语句会停止执行，但之后我就可以向上滚动了。

Answer 1

每次有新消息时，你真的需要滚动到消息div的底部吗？大多数消息应用程序都不这样做;它们只在查看消息开始时滚动到底部，因为您想要查看最新消息。

运行代码段。请注意，自动滚动到底部只执行一次，如果有新消息，我的滚动位置保持不变（因为我还在阅读），但添加了新消息。

$(document).ready(function(){
 var i = 1;
 setInterval(fillUpChat,2000);
 var div_to_scroll = $("#messages-container")[0];
 div_to_scroll.scrollTop = div_to_scroll.scrollHeight;

 function fillUpChat(){
  $("#messages").append("<li>New Message "+i+"</li>");
  i++;
 }
});

#messages-wrapper{
 height:200px;
 border:1px solid black;
 padding:10px;
}

#messages-container{
 height:100px;
 overflow-y:auto;
 border:1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="messages-wrapper">
 <div id="messages-container">
  <ul id="messages">
   <li>Old Message</li>
   <li>Old Message</li>
   <li>Old Message</li>
   <li>Old Message</li>
   <li>Old Message</li>
   <li>Old Message</li>
   <li>Old Message</li>
   <li>Old Message</li>
   <li>Old Message</li>
  </ul>
 </div>
</div>

Answer 2

使用javascript的 setInterval 函数，而不是递归调用函数;

//call request Chat every 2 seconds
var fetchChatRepeat = setInterval(fetchChat ,2000);

function fetchChat() {
 $.ajax({
  url: "fetch_chat.php",
  method: "POST",
  data: {
   id: currentID
  },
  dataType: "text",
  success: function(data) {
   $("#messages").show();
   $('#messages').html(data);
   $("div.area").show();
  }
 });
}

无法向上滚动div内容

2 个答案: