javascript 像facebook聊天系统一样在向上滚动时加载数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24450304/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Load data on scroll up like facebook chatting system
提问by kamaljit
i am developing a chat system where i need to display chat history on scroll up function like Facebook chat system.
我正在开发一个聊天系统，我需要在向上滚动功能（如 Facebook 聊天系统）上显示聊天记录。
can anybody help me?
有谁能够帮我？
回答by Kylie
It'll go something like this...
它会是这样的......
HTML
HTML
<div id="chatBox">
<div class='inner'>
<?php foreach($messages as $m){;?>
<div class='message'><?php echo $m;?></div>
<?php ;};?>
</div>
</div>
JQUERY
查询
$(document).ready(function(){
$("#chatBox").scrollTop($("#chatBox")[0].scrollHeight);
$('#chatBox').scroll(function(){
if ($('#chatBox').scrollTop() == 0){
// Do Ajax call to get more messages and prepend them
// To the inner div
// How you paginate them will be the tricky part though
// You'll likely have to send the ID of the last message, to retrieve 5-10 'before' that
$.ajax({
url:'getmessages.php',
data: {idoflastmessage:id}, // This line shows sending the data. How you get it is up to you
dataType:'html',
success:function(data){
$('.inner').prepend(data);
$('#chatBox').scrollTop(30); // Scroll alittle way down, to allow user to scroll more
};
});
}
});
});
// GENERATE FIRST BATCH OF MESSAGES
//This will be where you do your SQL and PHP first
for(var i=0;i<20;i++){
$('.inner').prepend('<div class="messages">First Batch messages<br/><span class="date">'+Date()+'</span> </div>');}
$("#chatBox").scrollTop($("#chatBox")[0].scrollHeight);
// Assign scroll function to chatBox DIV
$('#chatBox').scroll(function(){
if ($('#chatBox').scrollTop() == 0){
// Display AJAX loader animation
$('#loader').show();
// Youd do Something like this here
// Query the server and paginate results
// Then prepend
/* $.ajax({
url:'getmessages.php',
dataType:'html',
success:function(data){
$('.inner').prepend(data);
};
});*/
//BUT FOR EXAMPLE PURPOSES......
// We'll just simulate generation on server
//Simulate server delay;
setTimeout(function(){
// Simulate retrieving 4 messages
for(var i=0;i<4;i++){
$('.inner').prepend('<div class="messages">Newly Loaded messages<br/><span class="date">'+Date()+'</span> </div>');
}
// Hide loader on success
$('#loader').hide();
// Reset scroll
$('#chatBox').scrollTop(30);
},780);
}
});body {font-family:Arial;}
#chatBox {width:300px;height:400px;border: 1px solid;overflow:scroll}
#loader {display:none;}
.messages {min-height:40px;border-bottom:1px solid #1f1f1f;}
.date {font-size:9px;color:#1f1f1f;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="chatBox">
<!--Loading ANIMATION-->
<img id="loader" src='http://opengraphicdesign.com/wp-content/uploads/2009/01/loader64.gif'>
<!--END LOADING ANIMATION-->
<div class='inner'>
<!-- WHERE YOU WILL LOAD CONTENT-->
</div>
</div>It'll likely be a little more complex then what I posted above though....to avoid double data, etc
它可能会比我上面发布的更复杂一些....以避免双重数据等
And also, you need to send the server the id of last post, or pagination data of sorts, so it know what to retrieve next. How you do that is your choice.
而且，您需要向服务器发送上一篇文章的 id 或各种分页数据，以便它知道接下来要检索什么。你怎么做是你的选择。
But basically youll query the server, and retieve the next 10 posts, and echo them in a foreach loop, then fetch that html, and display it
但基本上你会查询服务器，并检索接下来的 10 个帖子，并在 foreach 循环中回显它们，然后获取该 html，并显示它
