Populate scroll view as you scroll

Once you get a scroll view with a few hundred items, it can be painfully slow. Is there some smart way to dynamically populate the scrolls views as you scroll down? So I don’t have to load it all at once?

Sure, you can recycle the items and make an infinite conveyor belt.

To do this, start simple by presenting the items as non-moving “shelves”:

  1. compute how many items you can fit in your view
  2. present them, one by one
  3. allow mouse scroll to dynamically change the contents
    i.e. keep track of the topmost index and update accordingly
  4. make sure you handle the case when total items <= visible items

Once you nail down this behavior, make it more advanced:

  1. incorporate the animated offset and include one additional item
    i.e. you can now offset/move the shelves as a group without any gaps showing
  2. visually mask the entire scroll view so that you hide the illusion
  3. when the top item goes out of view, reposition it to the bottom, and vice versa

Optionally, if you want it more polished:

  1. make a visual variation when you arrive at the content limit
    i.e. scroll view alpha fades towards the direction where there is more content
    (this effect wears off once you get near the limit)
  2. make a rubber-band effect

Congratulations, you now have an infinite scroll view, but you dynamically update only the visible items, for maximum performance and zero preload time.

2 Likes

Thanks so much!

1 Like

And then to make it really feel performant, make the list scroll FASTER than your finger… 100% of my games use this, mostly between 2x and 4x faster than finger, and once you start using it, you will hate standard 1x finger scrolls because they feel so glacially slooooooooooowwwwwwwww…

Faster scrollrect:

I wish all social media apps had this but they never will because it lets you skip over their advertising too easily.

1 Like