Adding cells to top of UITableView without interrupting user scrolling

Question

I'm building a simple chat UI into my app but I'm having trouble with scrolling when prepending cells.

As the user scrolls up near the top I trigger a background load to get additional chat messages. When these arrive I prepend them (add them to the top of the table view).

The problem I'm seeing is that when the new cells come in, the table view scrolls all the way to the top.

What I'd like is that the user's position and scrolling direction/velocity doesn't get interrupted at all when the new cells are added.

I've read countless posts about this and I've tried all the proposed solutions (contentOffset reset, estimatedRowHeight caching, reloadData, insertRow, etc) but none seem to quite work.

Most solutions out there are for situations where cells are added to the bottom of the table view. This works fine because the contentOffset isn't affected when you reloadData. But when prepending cells to the top there's no way to know the new total height of all new cells that got added.

I should mention that I'm using self-sizing cells with dynamic heights. The cells contain dynamic text that could be multiple lines long.

In order to eliminate any possible quirks with the rest of my app I've created a simple stripped down app to illustrate the problem.

You can check it out on github and try it out yourselves: github.com/nebs/pagination-scroll-test.

The app simply simulates an infinite list of fake messages. When you scroll all the way to the top it loads and prepends more fake messages (with a 2 second simulated delay). All the code is in ViewController.swift

You can ignore most of the boilerplate code. The main part of interest is in this line at the reloadTableView() function.

The "best" (so far) solution I have is Attempt #4 (see code). Here, I simply remember the top-most rendered message, then scroll to that message again. It kind of works, but if the user is mid-scroll it will jitter a bit because it doesn't scroll exactly to where the user was.

The other 3 attempts in my code don't work (the table view jumps to the top after the new cells are added).

I'm curious to hear what solutions others have found for this. It seems like a trivial problem on paper but I've been at this for many days with no clear solution in sight.

What's the current best practice for solving this? Specifically for tableviews where (dynamic, variable-height, self-sizing) cells are prepended at the top while the user is scrolling.

I thank you all in advance for any tips you can provide!

Wouldn't it be easier to say `self.tableView.scrollToRow(at: IndexPath(row: self.pageSize, section: 0), at: .top, animated: false)`, so you don't have to search through the messages. The last index path will always be at index `pageSize` where `pageSize` is the count of the last fetch. — beyowulf, Jan 30 '18 at 22:25
@beyowulf so this works if the user is all the way at the top of the table view before the cells load. But if the user triggers loading but then scrolls back down somewhere it would jump back up to the top of the previous page when the new cells came in, if that makes sense. I was hoping to find a solution that would appear to not interrupt the user's current scroll position/velocity. — nebs, Jan 30 '18 at 22:53
(notice in my code that I grab the `visible` index paths, which gives me the top-most visible message instead of the top-most overall message) — nebs, Jan 30 '18 at 22:59
You are calling **reloadData()**, this will obviously remove all the cells from the tableView and re-populate them. In simple words, everything in the previous state of the tableView is now gone, you now have a brand new tableView. It would be worth trying to selectively insert the newly added cells. Check this answer https://stackoverflow.com/a/31870301/1880899 — anemo, Jan 30 '18 at 23:27
@SumitAnantwar take a look at the project I linked in github, I have a few different attempts (commented out). I tried all of these including insert the cells using insertRow (see: https://github.com/nebs/pagination-scroll-test/blob/master/ScrollTest/ViewController.swift#L80) Even when I call insertRow and only insert the new cells it still scrolls to the top. Unless I missed something? — nebs, Jan 30 '18 at 23:36

score 0 · Accepted Answer · answered Jan 31 '18 at 01:03

I ended up going with a solution that works quite well. I'll post it here in case it helps someone else in the future. Still open to other answers.

Basically I find the message that is currently visible at the top of the view frame and I find its offset to the top. Then when the data loads I find that message again, find its new index path and scroll to there along with the offset. This has the effect of placing the user exactly to where they were (visually-speaking, of course when the cells are loaded the user is technically further down in the list).

I posted a commit to the linked github project with this new solution (it's under "Attempt #5", just uncomment that bit and comment out Attempt #1" to test it out.)

    var currentMessage: Message? = nil
var offsetFromTopOfMessage: CGFloat = 0
if let topIndexPath = self.tableView.indexPathsForVisibleRows?.first {
    var topMessageRect = self.tableView.rectForRow(at: topIndexPath)
    topMessageRect = topMessageRect.offsetBy(dx: -tableView.contentOffset.x, dy: -tableView.contentOffset.y)
    offsetFromTopOfMessage = topMessageRect.minY
    currentMessage = self.messages[topIndexPath.row]
}
self.generateMoreMessages()
self.tableView.reloadData()
if let targetMessage = currentMessage,
    let targetIndex = (self.messages.index{$0.title == targetMessage.title}) {
    let targetIndexPath = IndexPath(row: targetIndex, section: 0)
    self.tableView.scrollToRow(at: targetIndexPath, at: .top, animated: false)
    self.tableView.contentOffset.y -= offsetFromTopOfMessage
}

Adding cells to top of UITableView without interrupting user scrolling

1 Answers1