Playing with a long list (500+) facebook friends list with pics & buttons on each li.
The scroll feeling is only perfect when i have first scrolled down entirely. Before that i have some rectangles that render a bit late.
Maybe (with an option) it could be possible to "pre-load / pre-scroll the list", displaying some kind of opaque loading msg over it.
Have you tried using -webkit-transform: translate3d(0,0,0); on your li elements?
I've tried that, didn't see a difference.
For really long lists, I think the only way we're going to get good performance is to create and destroy elements dynamically as you scroll, the way the Cocoa UITableView class works in iOS.
Do you mean remove and re-append to DOM? I don't think the DOM changes will be able to keep up with the scrolling speed. Is there a way to scroll through the list very quickly, thus putting all the elements in JS memory, to allow for good scrolling feel later?
About long lists & buffering, here is some interesting code from a sencha-touch Ext.List plugin addressing this specific point. Looks like it does indeed DOM manipulation.