Question

我正在尝试使用javascript代码在ajax请求$("#chatmessages").scrollTop($("#chatmessages")[0].scrollHeight);之后滚动到div的底部但是每当我有这个时，它都不会让我向上滚动，因为我有我的javascript每秒检查一个php文件，检查是否有任何新记录在mysql数据库中。这是我的javascript

var auto_refresh = setInterval(function (){$('#chatmessages').load('ajax.php').fadeIn("slow"); } , 10);

和我的php文件

<?php
$con = mysqli_connect('localhost','root','','chat');
$query = mysqli_query($con,"SELECT * FROM `messages`");
while ($row=mysqli_fetch_assoc($query)) {
        echo '<div class="chat-replies">
                                <div class="chat-reply-container">
                                        <div class="chat-reply-avatar">
                                                <img src="img/default_avatar.png">
                                        </div>
                                        <div class="chat-reply-chat">
                                                <span class="chat-reply-author">',$row['user'],'</span><br>
                                                <span class="chat-reply-content">',$row['message'],'</span>
                                        </div>
                        </div>
                                </div>';
}
?>

任何人都知道如何在从数据库中找到新行后滚动到div的底部，然后仍然可以滚动到顶部？提前谢谢！

Answer 1

你不应该做多件事：

首先，您使用setInterval重新加载内容。

如果服务器在10毫秒内没有响应，或者互联网连接速度很慢，那么您最终会遇到多个活动请求。这会导致未定义的行为，因为较新的响应可能会在稍后到达一个或在队列中到达，然后在处理它们之后会更快地增长。

另一件事是你在fadeIn上以#chatmessages（slow）的速度联系600 ms所以你排队10 ms动画600 ms。

首先，您只应在先前的请求以成功或失败结束时重新检查新消息，然后您应该等到{{1动画完成或你应该清除动画队列。

您也不应加载所有邮件，而只加载可用的新邮件。例如，发送您上次显示的消息的ID，并且仅当有新消息发送时才将其附加到fadeIn div。

还有一个注意事项：在您的问题中，您编写了#chatmessages，但您的代码使用[...]I have my javascript checking a php file every second to [...] ms来表示10。因此，如果您没有显示实际代码，则表示您为setInterval选择了错误的值。

在ajax请求代码不允许我向上滚动之后滚动到div的底部

1 个答案: