Javascript 在特定事件上向下滚动div

我有一个使用Ajax和HTML的简单聊天应用程序。 每当我加载新消息时，我都希望滚动div以显示最新消息，因此我将执行以下操作：

jQuery：

function SendMessage()
{
    var clientmsg = $("#comment").val();
    var email = $("#email").val();
    event.preventDefault();
    if (clientmsg != '')
    {
        $.ajax(
        {
            type: 'POST',
            url: url,
            data:
            {
                email: email,
                message: clientmsg
            },
            success: function (data)
            {

                // Success means the message was saved
                // Call the function that updates the div with the new messages
                UpdateChat();


                $("#conversation").scrollTop($("#conversation").outerHeight() * 1000);
            }
        });
    }
}

function SendMessage(){
      var clientmsg = $("#comment").val();
      var email = $("#email").val();
      event.preventDefault();
      if (clientmsg != '') {
          $.ajax({
              type: 'POST',
              url: url,
              data: {
                  email:  email,
                  message: clientmsg
              },
              success: function (data) {

              // Success means the message was saved
              // Call the function that updates the div with the new messages
                UpdateChat();

                setTimeout(performScroll, 500);

              }
          });
    }
}

我使用此行将div向下滚动至最大值：

$("#conversation").scrollTop($("#conversation").outerHeight()*1000);

我的问题是，它向下滚动到最大值，而不显示新消息。它向下滚动直到新消息之前的最后一条消息。这很奇怪，因为我是在更新聊天后打电话的。以下是更新聊天室的功能：

function UpdateChat(){
    $.ajax({
              // URL that gives a JSON of all new messages:
            url: "url",
            success: function(result)
            {
              var objects = JSON.parse(result);
              $("#conversation").html("");
              objects.forEach(function(key, index){
               //append the messages to the div
                $("#conversation").append("html here");
              });
            }
      });
  };

---

尝试将滚动行放在

setTimeout（）

方法中，以便在向下滚动之前允许大约

500ms的时间更新内容

jQuery：

function SendMessage()
{
    var clientmsg = $("#comment").val();
    var email = $("#email").val();
    event.preventDefault();
    if (clientmsg != '')
    {
        $.ajax(
        {
            type: 'POST',
            url: url,
            data:
            {
                email: email,
                message: clientmsg
            },
            success: function (data)
            {

                // Success means the message was saved
                // Call the function that updates the div with the new messages
                UpdateChat();


                $("#conversation").scrollTop($("#conversation").outerHeight() * 1000);
            }
        });
    }
}

function SendMessage(){
      var clientmsg = $("#comment").val();
      var email = $("#email").val();
      event.preventDefault();
      if (clientmsg != '') {
          $.ajax({
              type: 'POST',
              url: url,
              data: {
                  email:  email,
                  message: clientmsg
              },
              success: function (data) {

              // Success means the message was saved
              // Call the function that updates the div with the new messages
                UpdateChat();

                setTimeout(performScroll, 500);

              }
          });
    }
}

和滚动功能

function performScroll() {  
  $("#conversation").scrollTop($("#conversation").outerHeight()*1000);
}

如注释中所述，您可以使用
setTimeout（）
让dom update add在滚动之前留出一些时间。见下面的代码：

function SendMessage()
{
    var clientmsg = $("#comment").val();
    var email = $("#email").val();
    event.preventDefault();
    if (clientmsg != '')
    {
        $.ajax(
        {
            type: 'POST',
            url: url,
            data:
            {
                email: email,
                message: clientmsg
            },
            success: function (data)
            {
            // Success means the message was saved
            // Call the function that updates the div with the new messages
            UpdateChat();

            setTimeout(function() {
                $("#conversation").scrollTop($("#conversation").outerHeight() * 1000);
            }, 500);
        }
    });
}
}

假设在底部插入新元素，可以使用
scrollIntoView
确保新元素可见：

$.ajax({
    // ...
    success: function(data) {
        var lastElement = $('#conversation :last-child');
        lastElement[0].scrollIntoView();
    }
});

您是否尝试过查看滚动命令是否在ajax调用之外工作？基本上假设ajax调用成功。@thisiskelvin ajax成功是因为消息已保存到数据库中。当在浏览器控制台上测试时，滚动命令工作得非常好。它可能在
ajax
调用中，dom已经在dom中注册了更改（根据容器的新高度。解决方法可能是在
setTimeout（）中调用）
，给时间识别更改。您想让我在回答中显示吗？如果您在顶部添加新邮件（即，预先添加而不是追加），那么您就不用担心滚动了，新邮件就不会出现在列表的顶部，并且无需滚动即可访问。