Как прокрутить высоту div до дна в HTML?

Question

Я много искал для этого вопроса, и я нашел ответы, но ни один из них не был совместим с моей ситуацией.

Я работаю над Chat Application, и одна из его функций - показать старшее messages для некоторых chat channel. Элемент, который содержит messages, составляет <table>, и он установлен в <div>, и я установил фиксированную высоту и ширину для этого div.

приносят сообщения канала от SQL table вызова соответствующего servlet, и показать их в table используя AngularJS .В этой ситуации: есть ли способ в html/css/angular/javascript прокручивать div автоматически после окончания загрузить все сообщения?

мой код так:

HTML:

<div ng-show="channelmsg"> 
    <div style="max-width: 500px; max-length: 500px; height: 500px; overflow: auto;" id="mydiv"> 
     <table> 
      <tr ng-repeat="c in ChannelMsgResult"> 
       <td style="border: 1px; border-color =light gray; max-width:400px;"> 
        <span><img ng-src={{c.Photo}} style="border-radius:0.5cm; width: 50px; height: 50px;" /> 
         <a href="#" style="color: gray;"> {{ c.Nickname }} :</a> </span> 
         <br /> {{ c.Content }} &nbsp;&nbsp;&nbsp; <a href="#"><small>reply</small></a> 
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="#">see replies</a> <br /> 
         <label style="color: #9fa1a3;"><small>{{ c.DateTime }}</small></label> 
       </td> 
      </tr> 
     </table> 
    </div> 
</div> 

Controller's function, что называет шоу servlet и (по ng-show) ДИВ "mydiv":

$scope.displayChannelMsg = function(x) { 
    $http.get("http://localhost:8080/ExampleServletv3/displaychannelmsgservlet",{ 
      params:{ 
       channelid : x.ChanID 
      } 
     }).success(function(response) { 
      setTimeout(function() { 
       $scope.$apply(function(){ 
       console.log("went to servlet and succeeded") 
       $scope.ChannelMsgResult = response;//this variable will hold the channels 
       $rootScope.channelmsg=true; 

       }); 
      }); 
     }); 
}; 

Могу ли я сделать это простым способом без использования каких-либо внешних библиотек (например, углового клея)?

Пожалуйста, направляйте меня.

Благодаря

Answer 1

Назначить идентификатор для каждого сообщения, а затем использовать $anchorScroll("latest message id"); для перехода к сообщению

Answer 2

Вы можете попробовать положить:

setTimeout(function() { 
    var objDiv = document.getElementById("mydiv"); 
    objDiv.scrollTop = objDiv.scrollHeight; 
}, 0); 

после первой функции тайм-аута?