javascript - jquery scrollTop 到元素 scrollHeight 不起作用？

Question

我正在创建一个简单的聊天。每次收到新消息时，我都需要滚动到屏幕底部。

但是，我的滚动到底部的代码根本不起作用。

为了证明这一点，我创建了这个小提琴：

https://jsfiddle.net/jcp1sw23/

这是我的jQuery代码：

$(document).on("click",".sendPm",function() {


    var txt = $('#message2').val();


    var htm = '<li id="'+ txt +'" class="self"><div class="msg"><p>'+ txt +'</p><time>7:45</time></div></li>';

      $(".endDivChat").before(htm);

   var $t = $('#messages');
   $t.animate({"scrollTop": $('#messages')[0].scrollHeight}, "slow");

      });

如果您键入几条消息直到messages元素已满，您应该会看到滚动条出现。但它不会动画或滚动到底部。

具体来说，这是我滚动到底部的代码：

   var $t = $('#messages');
   $t.animate({"scrollTop": $('#messages')[0].scrollHeight}, "slow");

有人可以就这个问题提出建议吗？

非常感谢。

标签： javascriptjquery

Answer 1

   $("html, body").animate({"scrollTop": $('#messages')[0].scrollHeight}, "slow");

您正在选择前面的消息，您想要 html 正文，因为那是滚动的内容：)

这是它的工作原理：https ://jsfiddle.net/jcp1sw23/31/