Techniques for smooth infinite scrolling in HTML5

http://engineering.linkedin.com/linkedin-ipad-5-techniques-smooth-infinite-scrolling-html5

by datadiver • 13 years ago

48 8 13 years ago

engineering.linkedin.com

I get super frustrated by infinite scrolling when the site designer adds to the footer of the site menu options that aren't in the header menu. So you can NEVER click on the footer links that you so desperately need. Also wish you could kill infinite scroll w/a click or keyboard command.

datadiver4• 13 years ago

true, infinite scrolling and footer do not work together, unless footer is position:fixed, which is often the case on mobile. Infinite scrolling is pretty much the norm on mobile and is increasingly popular on desktop, pinterest and twitter are examples.

I have found only a couple of libraries that attempt some of the techniques used by LinkedIn team. One is [infinity.js](http://airbnb.github.io/infinity/) by airbnb but it is specific to pinterest-style masonry layouts, and another is [swipeview.js](http://cubiq.org/swipeview) by Matteo Spinelli, the great guy who created iscroll.js. We are using swipeview in [Urbini](http://github.com/urbien/urbini) but it is not good enough, scrolling is terribly slow. It is possible that it is some problem in interaction between jquery mobile and swipeview, so we are investigating it, but anyway swipeview is not even close to what LinkedIn guys have created. I know Sencha guys have a similar technique, [Infinite List Component](www.sencha.com/blog/the-making-of-fastbook-an-html5-love-story) but we do not want to use Sencha as it has terrible cross-browser support compared to JQM.

trunalb3• 13 years ago

SwipeView is pretty good but not good enough for large scale front end application. Also, SwipeView (at the time when I looked at it) required all of the data upfront v/s letting the app pull it via a webservice. If you're looking for more info on how LinkedIn achieved the buttery performance, you might want to look into http://www.youtube.com/watch?v=ft9R72R7TlI

Techniques for smooth infinite scrolling in HTML5

Related Stories