UITableView does not handle contentOffset correctly when scrolling/paging

Question

I have a table view over very large amount of data. For performance reasons, it can't be loaded all at once. More, sometimes random place of array should be loaded, so incremental pagination is not good option.

The current solution to these requirements is sliding window over data array. As user scrolls, I add cells from one end and remove from opposite end. I use scroll position (by looking at what cells are going onscreen) to determine whether it's time to load new data.

Usually, when you call tableView.deleteRows(at:with:) and remove cells from the beginning of table, tableView adjusts its contentOffset property so user still see same cells as before operation.

However, when tableView is decelerating after scrolling, its contentOffset is not adjusted on updates, and this causes loading new pages over and over until deceleration is completed. Then, on first update after deceleration, contentOffset is fixed by tableView and loading stops.

Same thing occurs when scrolling back and adding values at the beginning of table with tableView.insertRows(at:with:).

How can I make UITableView adjust its contentOffset properly?

OR are there other ways to overcome this bug -- keeping the ability to load arbitrary piece in the middle of data array and scroll from it?

I made a tiny project illustrating the bug:

https://github.com/wsb9/TableViewExample

Are you just trying to invert the scrolling? What is the end goal of this exercise? Also what is preventing it from loading all at once? Dequeuing a cell should be reusing a cell already in memory — AntonTheDev
Or are you trying to create infinite scrolling that loops around? I’m confused as why you would want to add / remove rows from the top / bottom — AntonTheDev
My suggestion is create operation queue !! , Create operation when new cell appears and cancel operation when cell goes out of screen. — Prashant Tukadiya
I downloaded your sample project. When I execute it on the iPhone 8 Plus simulator, it does scroll smoothly in both directions. So, what is the problem? — Reinhard Männer

manismku manismku · Accepted Answer · 2017-09-28T16:14:28

From your sample project, I can understand is you are trying to implement infinite scroll through the window content concept so that you can always have fixed number of rows (index paths ,lets say 100) so that when window scrolls down/up - table view remove indexPaths from top/bottom accordingly. And even though you have more data source item you can always have tableView of indexPaths 100

Basically you are dealing with two problem here:

ContentOffset
Dynamic height

Let's assume we have height is fixed (44) and table is not inverted. To implement Window for infinite scrolling you have to do following:

override func scrollViewDidScroll(_ scrollView: UIScrollView) {

        let bottom: CGFloat = scrollView.contentSize.height - scrollView.frame.size.height
        let buffer: CGFloat = 3 * 44
        let scrollPosition = scrollView.contentOffset.y

        if (scrollPosition > bottom - buffer) {
            dataSource.expose(dataSource.exposedRange.shift(by: 25))
            self.tableView.contentOffset.y -= self.dataSource.deltaHeightToRemove
        }
    }

Decide how much height buffer you need to keep when scroll goes down. This height buffer is the height after which you decides to insert some more item (25) into the datasource.
At this point you now have to remove items from the top
As you remove item from top you are basically telling scrollView to reduce it's content-offset by same height.
In this way total content size will be fixed every time

Hope it will help.

EDIT:- Here is the modified code which actually does infinite scroll at bottom of table view with dynamic cell height. This doesn't increase the rows count more than 100. but still loads data in sliding window. link

UITableView does not handle contentOffset correctly when scrolling/paging

2 Answers