Javascript 无法使我的div在每次单击按钮时自动滚动内容

在堆栈溢出上找不到任何好的解决方案。我有一个div元素，其中动态添加了内容。一旦在div中输入了一定数量的内容，div就已经可以滚动了。我想做的是让div在每次添加内容时自动向下滚动，这样用户就不必手动向下滚动才能看到新内容。这是我的HTML：

<div class="messageContainer">
  <ul class="messageList"> 
    <li class="messageItem" ng-repeat="message in messages">
     Message:<input readonly class="messageText" ng-model="message.text" ng-change="messages.$save(message)"></input>
   </li>
 </ul>
</div>

---

每次添加新元素时使用jQuery.animate

$('.container').animate({
    scrollTop: $(".container div:last-child").offset().top;
});

像这样： 将Element.scrollTop设置为Element.scrollHeight。像这样：

在纯JavaScript中：

var container = document.getElementsByClassName ('messageContainer')[0];
var submit = document.getElementById ('submit');

submit.onclick = function () {
    container.scrollTop = container.scrollHeight;
};

在jQuery中：

var container = $('.messageContainer')[0];

$("#submit").click(function() {
    container.scrollTop = container.scrollHeight;
});

---

重要的部分是将container.scrollTop设置为container.scrollTop，如果您要每隔几秒钟通过XMLHttpRequest或其他任何方法自动添加内容，只需在添加内容后将Element.scrollTop设置为Element.scrollHeight。

为您的问题添加angular js标记以获得更高的精确度。