我正在编写一个Web聊天系统,以允许用户向其 friend 写消息,但是使用jquery向下滚动新消息时遇到问题。
我有这些文件:messages.php
,用于存储提交和查看邮件的表单;chatupd.js
执行发布和获取消息,并每隔“x”秒刷新一次div;post_updmsg.php
将消息打印到数据库;get_updmsg.php
从数据库获取最新消息;
但是,此问题所需的唯一文件是前两个文件:messages.php
<div class='chatContainer'>
<div class='chatHeader'>
<h3>Welcome <?php echo get_talkm3_nome(); ?></h3>
</div>
<div class='chatMessages'>
<?php
include '../core/config.inc.php';
$db = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$id_usr_2 = $_SESSION['email'];
//Get Messages
$query = $db->prepare("SELECT * FROM `chat_t3`");
$query->execute();
//Fetch
while ($fetch = $query->fetch(PDO::FETCH_ASSOC))
{
$id_usr_2 = $fetch['id_usr_2'];
$id_usr_1 = $fetch['id_usr_1'];
$text = $fetch['text'];
$date = $fetch['date'];
if ($id_usr_1 == $_SESSION['email']){
echo "<li class='message_container'><div class='sender'>From - <b>".ucwords($id_usr_1)."</b> TO - ".ucwords($id_usr_2)."</b> - ".$text." ".ucwords($date)."</div></li> ";
} else {
echo "<li class='message_container'><div class='reader'>From - <b>".ucwords($id_usr_1)."</b> TO - ".ucwords($id_usr_2)."</b> - ".$text." -".ucwords($date)."</div></li> ";
}
}
?>
</div>
<div class='chatBottom'>
<form action='#' onSubmit='return false;' id='chatForm'>
<input type='hidden' id="id_usr_1" value="<?php echo get_talkm3_email() ?>"><br />
<input type='text' id='id_usr_2' value="" placeholder="inserisci la mail del destinatario" />
<input type='text' name='text' id='text' value='' placeholder='Type your message'>
<input type='submit' name='submit' value='Post'>
</form>
<br>
</div>
</div>
chatupd.js
$(function(){
$(document).on('submit', '#chatForm', function(){
var id_usr_1 = $.trim($("#id_usr_1").val());
var id_usr_2 = $.trim($("#id_usr_2").val());
var text = $.trim($("#text").val());
if (id_usr_1 != "" && id_usr_2 != "" && text != ""){
$.post('../core/chat/post_updmsg.php', {id_usr_1: id_usr_1, id_usr_2: id_usr_2, text: text}, function(data){
$(".chatMessages").append(data);
});
} else {
alert("Data Missing");
}
});
function getMessages (){
$.get('../core/chat/get_updmsg.php', function(data){
$(".chatMessages").html(data);
});
}
setInterval(function(){
getMessages();
}, 1000);
});
现在,我的问题是:
最佳答案
在其他实现中,有两种(不错)的方法可以实现您想要的。
第一个是您想要的:
不在底部(用户向上滚动)>锁定滚动
jsBin demo
如果用户滚动消息>在新消息到达时不要滚动到底部:
var $chat = $(".chatMessages");
var chatHeight = $chat.innerHeight();
var c = 1;
var chatIsAtBottom = true;
function newMessage() {
$chat.append("<li>This is message "+ (c++) +"</li>");
if(chatIsAtBottom){
$chat.stop().animate({
scrollTop: $chat[0].scrollHeight - chatHeight
},600);
}
}
function checkBottom(){
chatIsAtBottom = $chat[0].scrollTop + chatHeight >= $chat[0].scrollHeight;
}
$chat.scrollTop( $chat[0].scrollHeight ).on("scroll", checkBottom);
setInterval( newMessage, 2000 );
悬停/关注评论区域>切换锁定滚动
jsBin demo
另一个与this old post of mine有关,它执行以下操作:
如果用户将消息悬停在消息区域(逻辑上,他是:1.滚动,阅读,复制一些旧文本等……进行交互:))-比防止滚动
var $chat = $(".chatMessages");
var chatHeight = $chat.innerHeight();
var c = 1;
function newMessage() {
$chat.append("<li>This is message "+ (c++) +"</li>");
if(!$chat[0].noScroll) {
$chat.stop().animate({scrollTop: $chat[0].scrollHeight-chatHeight},600);
}
}
$chat.hover(function() {
return this.noScroll ^= 1;
});
$chat.scrollTop( $chat[0].scrollHeight );
setInterval( newMessage, 2000 );