Here is the template code I am working with:
<div class="chatbox" id="mailBody" >
<div class="panel-body" ng-repeat="mail in mails">
<div class="m-b-none" ng-if="mail.inboxMessageType == 1">
<a href class="pull-left thumb-sm avatar" ng-if="senderLength>=10"><img src="img/a2.jpg" alt="..."></a>
<a href class="pull-left thumb-sm avatar" ng-if="senderLength<10"><img src="img/business2.png" alt="..."></a>
<div class="m-l-xxl">
<div class="pos-rlt wrapper b b-light r r-2x">
<span class="arrow left pull-up"></span>
<p class="m-b-none mailbody">{{mail.body}}</p>
<p><span class="label bg-info dk m-l-sm taglist" ng-repeat="tag in mail.taglist" ng-if="mail.taglist">{{tag.name}}</span></p>
</div>
<small class="text-muted"><i class="fa fa-ok text-success"></i>{{ mail.date}}</small>
</div>
</div>
</div>
I have implemented a jQuery function to scroll to the bottom of the chatbox when it loads. However, it seems to stop in the middle. Here is the code snippet:
$('#mailBody').stop().animate({scrollTop: $("#mailBody")[0].scrollHeight}, 2000);
I am looking for a solution to make the scrolling go all the way down. Is there an event that I can use on full load of the div or any other method?
Below is the CSS for the chatbox:
.chatbox {
height: 327px;
width: 100%;
overflow: scroll;
overflow-x:hidden;
overflow-y:auto;
}
If anyone has a guide on how to achieve this, I would greatly appreciate it. Thanks in advance.