在第一次调用 Setinterval() 后滚动到 div 的底部

Question

我做了一个固定高度和overflow-y: scroll的评论部分，我想在那里加载一些带有setInterval函数的评论。

我的代码的问题在于，调用updateMessages的每一秒，它都会将我滚动到底部，而我无法向上滚动，因为每一秒我都会被发送回底部。 如何使用滚动的div加载消息，然后启动setinterval函数而不向下滚动？

<script>
setInterval(function(){
updateMessages();
},1000);
function updateMessages(){
$.ajax({
url: 'includes/display_discussions.php?id=<?php echo $_GET['id']; ?>',
type: 'POST',
success: function(show_messages){
if(!show_messages.error){                               
$("#scroll_down").html(show_messages);
var div = document.getElementById("scroll_down");
div.scrollTop = div.scrollHeight;
}
}
});
}    
</script>

Answer 1

加载消息后，您可以切换布尔值，并在第一种情况下使用它来滚动。然后，您可以在页面加载时手动调用一次updateMessages，setInterval每 30 秒调用一次：

var messagesLoaded = false;
function updateMessages() {
$.ajax({
url: 'includes/display_discussions.php?id=<?php echo $_GET["id"]; ?>',
type: "POST",
success: function(show_messages) {
if (!show_messages.error) {
$("#scroll_down").html(show_messages);
if (!messagesLoaded) {
messagesLoaded = true;
var div = document.getElementById("scroll_down");
div.scrollTop = div.scrollHeight;
}
}
}
});
}
document.addEventListener("DOMContentLoaded", updateMessages);
setInterval(updateMessages, 30000);