如何在添加新内容时自动向下滚动 div(来自 xmlhttp.open)

Question

https://jsfiddle.net/kv5gbamg/- 我做了一个jsfiddle，展示了系统的功能

基本上，我想知道如何在每次收到新消息时使滚动条转到底部。

每 100 毫秒，我的系统就会使用将要发送的任何新消息更新div。

但遗憾的是，当收到新消息时，它不会自动滚动到页面底部！

我的系统只是每x秒检查一次php文件

这是我的代码片段，可以做到这一点：

echo "<div class='msg'>";
while($row = mysqli_fetch_array($result)) {
echo "";
echo "<div class='username'>" . $row['username'] . "</div>";
echo "<div class='message'>" . $row['message'] . "</div>";
echo "";
}
echo "</div>";
mysqli_close($con);

这是它的工作原理：

• 它从数据库中获取消息并将它们显示在div 标签中
• 用户还可以向发出 POST 请求的数据库发送消息

我想让它做什么但无法弄清楚：

• 当网页加载时，它应该会自动滚动到底部
每次
• 收到新消息时(所以基本上每次将某些内容添加到数据库中时(，它都应该向下滚动到页面底部
• 即使用户在页面上高处，也应该向下滚动它们

我已经在 StackOverflow 上看到了很多这样的内容，但它们只有在按下按钮后才会更新，因此，这意味着如果有人要向我发送消息，那么我不会向下滚动页面，因为我不会按下按钮

我在StackOverflow上的任何地方都看不到已回答的问题

p.s. 基本上，我想要的滚动系统就像 Messenger(桌面版(上的滚动系统一样，但我无法弄清楚如何让它滚动

非常感谢您抽出宝贵时间帮助我，希望我为您提供了足够的信息来帮助我！(非常感谢，你不知道在这里帮助我意味着什么(

编辑：这是我的JavaScript函数，用于从PHP文件中获取消息(在数据库中(

function showmessage(str) {
if (str == "") {
return;
} else { 
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("chat").innerHTML = this.responseText;
}
};
xmlhttp.open("GET","/backend-display.php?q="+str,true);
xmlhttp.send();
}
}
//Show any messages that will pop-up
setInterval('showmessage()',100);

Answer 1

** 查看全屏示例

var i = 1;
var interval = setInterval(function() {
execute();
}, 1000);
$(document).ready(function() {
execute();
});
function execute() {
$("#chatbox").append("This would be a message recieved from a database using an xmlhttp request!<br/><br/>");
getMessages();
if (i == 50) {
clearInterval(interval);
}
i++;
}
function getMessages(letter) {
var div = $("#chatbox");
div.scrollTop(div.prop('scrollHeight'));
}

#chatbox {
padding: 5rem 1.5rem;
text-align: left;
height:300px; 
width:75%; 
margin:0 auto;
background: green;
overflow: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div id="chatbox">
</div>
</div>
Users could send a message if they wanted to (As there is a send box)

如果你搜索这个，只需添加我的getMessages((函数。

让我知道它是否对您有帮助。

希望对您有所帮助。

Answer 2

我认为这就是你想要的 我添加了

$('#chatbox').scrollTop($('#chatbox')[0].scrollHeight);

附加后，我们得到div高度，然后滚动 这里有一个新的小提琴