How to handle new data addition on infinite scrolling DOM

Question

I had a question where I thought I needed some expert advice. I have an infinitely scrollable div which is loaded by a list, 10 at a time. Everything works fine if there are no changes in the list.

I have a form which prepends the list with a new item and hence disturbs the sequence of infinite scroll i.e. last item in the displayed content is repeated.

I'd be thankful if anyone could advice me how to handle this condition. Things I tried to do,

Splicing the last item in the already displayed content. (vague way, will not be useful if list is prepended with multiple items)
Keeping track of how many items are prepended and passing a skip = <number_of_prepended_items> argument to the server to skip these newly added items (works fine but i feel it will break)
Reload the first 10 items upon addition of new item.

Any suggestions?

Do you have all the data already loaded in the client, or do you fetch it every time from a server? — Tempestas Ludi, Nov 12 '16 at 23:23

Harry Pehkonen · Answer 1 · 2016-11-12T23:31:48.567

0

Each item could have some value that denotes order. When more items get added, order gets incremented. Your infinite scroll could keep reducing max order by the number of items retrieved each time. For example:

[ { order: 12, title: "something", body: "...text..." }, { order: 11, title: "whatever", [...snip...] } ]

When a new item gets added, it will have order 13.

If somebody was already scrolling, the page would know the order of the lowest article, and fetch the next batch that's even lower.

Please note: I was going to say "id" instead of order, but I don't know what kind of back-end you are using.

edited Nov 12 '16 at 23:31

answered Nov 12 '16 at 23:26

Harry Pehkonen

2,968
2
15
19

all the data that I receive from server is already in descending order based on time. Isn't the `time` here doing the work of id? – Vishal Sharma Nov 12 '16 at 23:53
Yes, exactly -- you can use time stamps too. – Harry Pehkonen Nov 13 '16 at 02:53
Combination of my second method with descending timestamps turns out to be the best way. – Vishal Sharma Nov 14 '16 at 13:07

score 0 · Answer 2 · answered Nov 12 '16 at 23:29

As Harry Pehkonen said, you could, for example, give each item an id value, which you increment by one for each new element. Then you can request the first 10 items after a certain id from the server, which in your case is the lowest id on the page (literally). That will give you the first 10 items you do not have and prevent duplicates.

How to handle new data addition on infinite scrolling DOM

2 Answers2