How to scroll div height to the bottom in HTML?

Question

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

Shahzad · Accepted Answer · 2017-02-22 08:45:39Z

1

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

answered Feb 22, 2017 at 8:45

Shahzad

1,7131 gold badge13 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user6561572 Over a year ago

I added settimeout function and it worked: setTimeout(function () { $scope.$apply(function(){ $anchorScroll('below'); }); thank you });

darthzejdr · Accepted Answer · 2017-02-21 18:30:41Z

0

Can you try putting:

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

after your first timeout function?

edited Feb 21, 2017 at 18:30

answered Feb 21, 2017 at 18:20

darthzejdr

3141 gold badge3 silver badges13 bronze badges

4 Comments

darthzejdr Over a year ago

Well, you need to run it after it fills your table. You could make it a function, but you'd still need to run it after fill.

darthzejdr Over a year ago

can you check: it deals with $scope.$apply: stackoverflow.com/questions/17225106/…

user6561572 Over a year ago

yes exactly ,but this is the problem ,how can I call this function from the html code without clicking any button?

darthzejdr Over a year ago

Let us continue this discussion in chat.

Collectives™ on Stack Overflow

How to scroll div height to the bottom in HTML?

2 Answers 2

1 Comment

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Linked

Related