如何控制滚动聊天框
如何控制滚动聊天框
提问于 2016-02-16 22:25:41
我有一个AJAX聊天框，我想控制滚动框。
例如，当您发送新消息时，我让它由setInterval自动滚动
setInterval(function(){
$("#chattingbox").load("msgs.php");
$("#chattingbox").each( function()
{
var scrollHeight = Math.max(this.scrollHeight, this.clientHeight);
this.scrollTop = scrollHeight - this.clientHeight;
});
}, 2000);但是，如果您向上滚动并尝试查看旧消息，它将自动向下滚动，所以只有当您已经向下滚动并在通知中提到如果您有新消息时，我才能自动地使其自动进行。
这是我的密码
<? require_once ("includes/config.php"); ?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Chat</title>
<link rel="stylesheet" type="text/css" href="style/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="style/css/style.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.autosize.min.js"></script>
<script type="text/javascript" src="js/chat.js"></script>
</head>
<body>
<div id="chatbox">
<div id="hedchatbox">Simple Chat</div>
<div id="hedroomchatbox">
<input type="text" placeholder="yourname" name="name" class="name" >
<div class="clear"></div>
</div>
<div id="chattingbox">
<?
$select_msgs = $mysqli->query("SELECT * FROM me ORDER BY id ASC limit 20");
$num_msgs = $select_msgs->num_rows;
while ($rows_msgs = $select_msgs->fetch_array(MYSQL_ASSOC)){
$id_msgs = $rows_msgs ['id'];
$username_msgs = $rows_msgs ['username'];
$text_msgs = $rows_msgs ['text'];
?>
<div class="message">
<div class="infouser"><? echo $username_msgs; ?></div>
<div class="textmsg"><? echo $text_msgs; ?></div>
</div>
<?
}
?>
</div>
<div id="textareachat">
<textarea class="textmessage" placeholder="Your message..."></textarea>
</div>
</div>
<div class="loading"></div>
</body>
</html>JQuery
$(document).ready(function(){
$('.textmessage').autosize();
setInterval(function(){
$("#chattingbox").load("msgs.php");
$("#chattingbox").each( function()
{
var scrollHeight = Math.max(this.scrollHeight, this.clientHeight);
this.scrollTop = scrollHeight - this.clientHeight;
});
}, 2000);
$("#chattingbox").each( function()
{
var scrollHeight = Math.max(this.scrollHeight, this.clientHeight);
this.scrollTop = scrollHeight - this.clientHeight;
});
$('.textmessage').keypress(function (e) {
if (e.which == 13) {
var name = $(".name") .val();
var text = $(".textmessage") .val();
var s = {
"name":name,
"text":text
}
$.ajax({
url:'send_msg.php',
type:'post',
data:s,
beforeSend: function (){
$(".loading") .show();
$(".loading") .html("انتظر جارى التحميل....");
},
success:function(data){
$(".textmessage").val("");
$(".loading").html(data);
}
});
return false;
}
});
});这是msgs.php
<?php
require_once ("includes/config.php");
$select_msgs = $mysqli->query("SELECT * FROM me ORDER BY id ASC limit 20");
$num_msgs = $select_msgs->num_rows;
while ($rows_msgs = $select_msgs->fetch_array(MYSQL_ASSOC)){
$id_msgs = $rows_msgs ['id'];
$username_msgs = $rows_msgs ['username'];
$text_msgs = $rows_msgs ['text'];
?>
<div class="message">
<div class="infouser"><? echo $username_msgs; ?></div>
<div class="textmsg"><? echo $text_msgs; ?></div>
</div>
<?
}
?>回答 1
Stack Overflow用户
发布于 2016-02-17 00:23:30
相反，在自动滚动任何2秒，您可能想尝试向下滚动，只有当您的邮件窗口被重新加载。换句话说，要将AJAX函数修改为如下所示：
success:function(data){
// Get your backend response first...
$(".textmessage").val("");
$(".loading").html(data);
// ...and only then scroll it down.
var scrollHeight = Math.max($("#chattingbox").scrollHeight, $("#chattingbox").clientHeight);
$("#chattingbox").scrollTop = scrollHeight - $("#chattingbox").clientHeight;
}这个解决方案并不完美，因为你的聊天窗口似乎只有当你发布一些东西时才会刷新(除非你没有向我们展示JS的部分内容)，但至少在可用性方面它更有意义。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35444216
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号