如何在HTML中將div高度滾動到底部？

Question

我一直在尋找這個問題很多，我找到了一些答案，但沒有一個適合我的情況。

我正在研究“ Chat Application ，其功能之一是為某些chat channel顯示較舊的messages 。 存放messages的元素是<table>並且在<div>設置，我為此div設置了固定的高度和寬度。

我通過調用適當的servlet從SQL table通道的消息，並使用AngularJS在table顯示它們。在這種情況下： 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>

調用servlet並顯示（通過ng-show ）div“ mydiv”的Controller's function ：

$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;

              });
            });
        });
};

我可以不使用任何外部庫（例如angular-glue）以簡單的方式執行此操作嗎？

請指導我。

謝謝

Answer 1

為每條消息分配一個ID，然后使用$anchorScroll("latest message id"); 滾動到消息

Answer 2

你可以試一下：

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

您的第一個超時功能之后？