每次單擊按鈕時，無法讓我的div自動滾動內容

Question

在堆棧溢出時，無法在此找到任何好的解決方案。 我有一個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>

Answer 1

每次添加新元素時，請使用jQuery.animate（）。

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

像這樣： https : //jsfiddle.net/gkehnkdk/4/

Answer 2

將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.scrollHeight設置為Element.scrollTop即可。