javascript - AJAX 完成后滚动到 div 的底部

Question

我在这里看到了如何滚动到 div 的底部...但不知何故，它对我不起作用……自动对焦也是如此。

我猜问题是我进行了 AJAX 调用，但它不起作用。

我的 AJAX 调用:

  function toonBericht(vuserid) {
    $("#verstuurbericht").show();
    $("#chatresultaatcontent").val("");

    $.ajax({
      type: "GET",
      data: { userid:vuserid }, 
      url: './query/berichten/getbericht.php',
      success: function(result) {
        $("#chatresultaatcontent").html(result);
        var objDiv = document.getElementById("chatresultaatcontent");
        objDiv.scrollTop = objDiv.scrollHeight;
      }
    });
  }

当然，我有一个名为#chatresultaatcontent 的 div。它包含来回发送的聊天消息。

作为替代方案，我还尝试使用以下代码在成功后加载一个函数(即 scrollBottom()):

$("#chatresultaatcontent").scrollTop($("#chatresultaatcontent")[0].scrollHeight);

这也没有做任何事情。成功后尝试自动对焦时出现同样的问题...有人知道为什么吗？

Answer 1

试试这个:

success: function(result) {
    var content = $("#chatresultaatcontent");
    content .
        html(result).
        delay(50).
        scrollTop(content[0].scrollHeight);
        // The delay seems essential due to some strange problems
        // with the OP's code
  }

A working Demo