search

onefinestay / react-lazy-render

Lazy render for (very) large lists of data
Other
208 stars 23 forks source link

Breaks accelerated scrolling #2

Open bessey opened 9 years ago

bessey commented 9 years ago

(Great library by the way :heart:)

I notice accelerated scrolling comes to an abrupt halt when the user scrolls at speed. I suspect this is because there isn't a large enough buffer of future nodes in the DOM.

bessey commented 9 years ago

Perhaps if the number of nodes was configurable this would address the problem.

jkimbo commented 9 years ago

Good point! Never came across this problem when testing it but it definitely makes sense to make it configurable.

jkimbo commented 9 years ago

itemPadding property is now available on v0.2.0

bessey commented 9 years ago

Thank you! I've updated but I'm still facing the same problem.. Took some more time to debug this time.

It seems in Firefox, things are buttery smooth (actually reducing itemPadding to 1 makes things even smoother!). Increasing padding, even to a mammoth amount, has no effect on Chrome or Safari. Within maybe 100ms of me releasing my fingers from the trackpad, the lazy render scrollbar stops hard, and the outer container is pulled down.

Its not a dealbreaker for me anyway, and i must say it feels absolutely fantastic in FF. I wonder why webkit doesnt like it so much... I don't have much experience debugging these things so I'm going to leave it for now

jkimbo commented 9 years ago

Hmm interesting. What operating system are you on btw? Also is the same thing happening on the demo page for you (http://onefinestay.github.io/react-lazy-render/)?

bessey commented 9 years ago

OS X, but it doesn't happen with the demo, so I'm gonna assume its my fault. Will continue to investigate

On Mon, 2 Mar 2015 at 06:40 Jonathan Kim notifications@github.com wrote:

Hmm interesting. What operating system are you on btw? Also is the same thing happening on the demo page for you ( http://onefinestay.github.io/react-lazy-render/)?

— Reply to this email directly or view it on GitHub https://github.com/onefinestay/react-lazy-render/issues/2#issuecomment-76722443 .

jkimbo commented 9 years ago

Ah so are you setting a key on your children? I've noticed this problem before where if I set a key then it halts the browser scrolling. What I imagine is going on is that since the keys are different React replaces the whole div rather than just replacing the contents of it and that halts scrolling in Chrome. For the demo I don't set any keys since it's not strictly necessary.