在特定事件上向下滚动 div答案

【问题标题】：scroll div down on specific event在特定事件上向下滚动 div
【发布时间】：2018-10-26 10:31:33
【问题描述】：

我有一个使用 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);
            }
        });
    }
}

我使用这一行将 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");
              });
            }
      });
  };

【问题讨论】：

您是否尝试过查看滚动命令是否在 ajax 调用的外部工作？基本上假设 ajax 调用是成功的。
@thisiskelvin ajax 成功，因为消息已保存到数据库中。在浏览器的控制台上测试时，滚动命令运行良好
可能在 ajax 调用内，dom 已在 dom 中注册了更改（就容器新高度而言。解决方法可能是在 setTimeout() 内调用，给时间识别变化。
您希望我在答案中显示吗？
如果您在顶部添加新消息（即 - 将它们放在前面而不是附加它们），那么您将不必担心滚动，并且较新的消息只是位于列表顶部并且可以访问无需滚动。

标签： javascript jquery html ajax

【解决方案1】：

如 cmets 中所述，您可以使用 setTimeout() 让 dom 更新添加在滚动前有一些时间。见以下代码：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

尝试将滚动线放在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();

                setTimeout(performScroll, 500);

              }
          });
    }
}

还有滚动功能

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

【讨论】：