加载ajax数据后滚动到div底部不起作用

Question

所以我有一个带有滚动条的 div。当您开始时，div 从底部开始。但是，当我在发布请求后加载新的 ajax 数据时，它不再滚动到底部。我相信在添加 ajax 数据之前它会进入“以前的”底部，你们能帮忙吗？

<div id='messages'>
  <div id='message_box'>
    text messages
  </div>
</div>

// this works page start off with div scroll to the bottom
$(document).ready(function() {
  var objDiv = document.getElementById("messages");
  objDiv.scrollTop = objDiv.scrollHeight;
})

// ajax post request works, but the scroll to bottom in the success method isn't working
// it is scrolloing to the second last message not last how do i fix this?
var url_link = window.location.href;
$.ajax({
  data: {
    'text': 'text'
  },
  type: "POST",
  url: url_link,
  success: function() {

    $('#message_box').load(url_link + ' #message_box');
    var objDiv = document.getElementById("messages");
    objDiv.scrollTop = objDiv.scrollHeight;
  },
  error: function(e) {
    console.log("Bad request: " + e);
  }

#messages {
  overflow-y: scroll;
  width: 100px;
  height: 250px;
}

回顾一下。问题是消息 div 在 ajax post 方法之后没有滚动到 div 的底部。高度是最后一条消息而不是最后一条消息，所以我需要向下滚动才能看到新消息。我该如何解决这个谢谢

Answer 1

从 HTML 的结构看来，load() 调用正在将内容放入#message_box，这会影响#messages 的高度。因此，您需要在load() 的回调中更新scrollTop，而不是在$.ajax() 调用中。试试这个：

let scrollToBottom = $container => $container.prop('scrollTop', $container.prop('scrollHeight'));

jQuery($ => {
  let $messages = $('#messages');
  scrollToBottom($messages); // scroll down on page load
  
  let url_link = window.location.href;
  $.ajax({
    data: { text: 'text' },
    type: "POST",
    url: url_link,
    success: function() {
      $('#message_box').load(url_link + ' #message_box', () => scrollToBottom($messages));
    },
    error: function(e) {
      console.log("Bad request: " + e);
    }
  });
})

请注意，我对逻辑做了一些小的修改以避免重复并确保代码在 DOM 加载后运行。