每隔x秒加载div并允许向上滚动

Question

在聊天应用程序中，我想继续加载接收发布消息的div，并向下滚动到div。我的问题是，一旦向下滚动，我就无法滚动到顶部查看以前的消息，因为向下滚动是在setInterval函数中。我该如何解决这个问题，或者有其他方法可以实现这个问题吗？

Fiddle:jsfiddle.net/hu4zqq4x/316

感谢

setInterval(function() {
$(".messages").stop().animate({
scrollTop: $(".messages")[0].scrollHeight
}, 1000);
var messageTo = $("#message-to").val();
var message_from = <?=$iduser?>;
$('#new_message1_doc').load("<?php echo base_url("
admin_medico / newMessageDoc ")?>?messageTo=" + messageTo + "&id_user=" + message_from);
}, 1000)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='messages'>
<div id="new_message1_doc"></div>
</div>

Answer 1

您可以保存滚动到的位置，如果没有新消息，则该位置不会更改，在这种情况下，不要执行滚动。

示例

var lastScrollPosition;
function getMessages(letter) {
var div = $("#messages");
if (lastScrollPosition != div.prop('scrollHeight')){
lastScrollPosition = div.prop('scrollHeight');
div.scrollTop(lastScrollPosition );
}
}
$(function() {
setInterval(function(){
getMessages();
}, 1000);
});

另一种方法是只发送新消息，然后只在收到新消息时滚动。