Question

我有一个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);

但如果您向上滚动并尝试查看旧消息，它会自动向下滚动，以便我只有在您已经向下滚动时自动创建它并在通知中提及您是否有新消息

这是我的代码

HTML

<? 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>
<?
}
?>

Answer 1

而不是自动向下滚动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与你没有展示的相关），但至少它更有意义 - 明智的。

如何控制滚动聊天框

1 个答案: