Hello!
In our app we have implemented a messaging system similar to WhatsApp/Telegram: new messages are on the bottom and old messages are on the top of the view.
The user can scroll up to load more items (right now I’m doing this using a button to load more, placed at the top of the view). The problem is that, since we’re adding more items to the start of the array, the user ends up seeing the first messages of the view instead of seeing the messages he was seeing before loading the previous ones. That’s because the scroll height has changed, but the scroll position is the same.
Example: The view loads the last 50 messages. The user scrolls top, so he sees the oldest message loaded (let’s call it message 50) and the “Load previous” button. He clicks the button, the view loads 50 messages more and the user ends up seeing the “Load previous” button along with the oldest message loaded (message 100), but not the message 50 where he was.
To fix this I’ve done the following:
var oldHeight = scrollView.getScrollView().__contentHeight;
fetchMessages().then(function() {
$ionicScrollDelegate.resize();
// Wait for new scroll height to be calculated.
$timeout(function() {
var newHeight = scrollView.getScrollView().__contentHeight;
$ionicScrollDelegate.scrollBy(0, newHeight - oldHeight);
});
});
This works, but the User Experience is quite poor. When loading more messages, the user sees the wrong messages for a second or so, and then he goes back to the right position.
Is there any way to prevent this weird effect so the user sees the same messages as he did before loading the previous ones?
Thanks!