CODEWITHSUNDEEP
javascripthtmlcssangularjsscroll
user6561572
user6561572

Reputation: 339

How to scroll div height to the bottom in HTML?

I've been searching a lot for this question and I found some answers but none of them were compatible for my situation.

I am working on Chat Application and one of its functionalities is to show older messages for some chat channel. The element which holds the messages is <table> and it is set in <div> ,and I've set a fixed height and width for this div.

I bring channel's messages from SQL table by calling the appropriate servlet,and show them in the table using AngularJS .In this situation:is there a way in html/css/angular/javascript to scroll the div automatically after finishing to upload all the messages?

my code is like that:

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>

The Controller's function that calls the servlet and shows (by ng-show) the div "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;

              });
            });
        });
};

Can I do this in a simple way without using any external libraries (like angular-glue)?

Please guide me.

Thanks

Upvotes: 0

Views: 94

Answers (2)

Shahzad
Shahzad

Reputation: 1703

Assign an id to each message and then use $anchorScroll("latest message id"); to scroll to the message

Upvotes: 1

darthzejdr
darthzejdr

Reputation: 314

Can you try putting:

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

after your first timeout function?

Upvotes: 0

Related Questions