Question

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

谢谢

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

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

Example here

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);

});

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

每x秒加载div并允许滚动顶部

1 个答案: