832387 - Prototype fast scrolling component

Status: RESOLVED FIXED

(Marketplace Graveyard :: Developer Pages, defect)

Description

[Fred Wenzel [:wenzel]]

List scrolling performance with big lists is suboptimal on mobile. Please prototype a list scrolling component that will perform better than a document with thousands of DOM nodes.

User stories are here: https://etherpad.mozilla.org/yyXU7zJDoj

You're allowed to make certain assumptions / place restrictions on the data that simplify, at least at first.

Please put together some thing and ask for feedback so we can iterate.

Comment 1

[Arron Schaar [:arron]]

Here's a prototype:

http://x-tag.github.com/scrolling-list/demo/index.html

Repo:

https://github.com/x-tag/scrolling-list

It's optimized by reusing the same elements as you scroll. The items that scroll out of view on the top are moved to the bottom and updated with new data from the JSON data array.

Known issues:
-On desktop the X-Tag implementation's top and bottom margins get messed up if you grab the scroller and whip it around a lot.
-Going from large to small data sets messes the scroller up and you have to reload the page. 

:gbrander

Now that I have this prototype, I'm wondering if there is a place in FFOS that has issues with scrolling large lists.  I would like to see if I can load that dataset and see if this scroller helps at all.

Comment 2

[Daniel Buchner [:dbuc]]

Let's review the prototype and test it tomorrow. This sounds like a solid first step, and with some tuning, should be able to overcome any rough edges.