I've created a chat feature in my Ionic app, but the issue is that when a user receives a new message while being on the chat screen, the view doesn't automatically scroll down to show the new message. The user has to manually scroll down to see it.
Is there a way to implement auto-scrolling to the bottom of the page whenever a new message appears?
Here's the HTML code snippet from my implementation:
<ion-view view-title="Chat Detail">
<ion-content class="padding" start-y="430">
<ol class="messages">
<li ng-repeat="message in messages" ng-class="{self: message.userId === myId, other: message.userId !== myId}">
<div class="avatar">
<img ng-src="{{ message.profilePic }}">
</div>
<div id="data" class="msg">
<p>{{ message.text }}</p>
<time>
<i class="icon ion-ios-clock-outline"></i>
{{message.time}}
</time>
</div>
</li>
</ol>
</ion-content>
<ion-footer-bar keyboard-attach class="item-input-inset bar-detail">
<label class="item-input-wrapper">
<input onblur="this.focus()" autofocus type="text" placeholder="Type your message" on-return="sendMessage(); closeKeyboard()" ng-model="data.message" on-focus="inputUp()" on-blur="inputDown()" />
</label>
<a class="button button-icon icon ion-arrow-return-left" ng-click="sendMessage()" ></a>
</ion-footer-bar>
</ion-view>
EDIT: Controller logic added:
//Receive messages
$timeout(function(){
var ref = firebase.database().ref('/messages/' + $scope.currentDiscussion);
ref.orderByChild("timestamp").on("value", function(snapshot1) {
$timeout(function(){
$scope.messages = snapshot1.val();
})
})
})
window.scrollTo(0,document.body.scrollHeight);
$scope.sendMessage = function() {
...