Infinite Win

How to do inifinite scrolling right

Neil Jenkins / @neilj

FastMail

Isn't scrolling great?

  • Spatial navigation
  • Better than pagination for many use cases

Making it work with lots of data.

  • Long list, known length*
  • Really infinite, fixed height items
  • Really infinite, variable height items

* Not actually infinite.

Long list: how not to do it

Scroll to the bottom, then add another page

  • No idea length of content
  • Can't jump to an arbitrary place
  • Often breaks the back button…

Long list: how to do it right

  • Fixed height items
  • Progressively render
  • Calculate visible section on scroll

Infinite list, fixed height items

  • Fixed height scroll area
  • Shift position if you get near the edge

Infinite list, variable height items

  • Fixed number of items
  • Shift position if you get near either end of the list

Thank You

Slides are available at
http://nmjenkins.com