Bad performance with more than 50 element about reactscrollbar HOT 7 OPEN

It is not react motion, animating margin-left and margin-top in order to fake the scrolling causes layout thrashing. There are a couple of concerns with performance on this lib.

• Using margin-top/left for animating as noted above
• Querying the DOM on every event cycle for layout dimensions

I have a fork with these fixed but have not had time for a pull request. While this is not helpful, I was able to scroll 1000+ items smoothly using translate3d and caching the dimensions.

from reactscrollbar.

Hi and thanks,
I know that ScrrollArea has a lot of performance issues. But I have not found any good solution to fix those issues yet. (BTW @tkh44, your's ideas look promising)
I will try to fix that issues. But I'm open to your ideas, solutions and PR.

from reactscrollbar.

@tkh44 we're hitting this issue too. You said you have a fork with the fix. Could you point me to it?

from reactscrollbar.

@caphun it is not public unfortunately. I just ripped it out and ended up rewriting most of it from scratch. Here is a gist of what I had in my stash.

https://gist.github.com/tkh44/b20a330ed69ba56915c89190e04fe96d

Note I was using redux to hold the state in this example. The most important part is just switching out margin for transforms.

from reactscrollbar.

Actually I have found using PureRenderMixin on the content wrapping Component can help. It may cause by, as @tkh44 said, layout thrashing. But I suspect more on updating each element components upon scrolling breaks the performance. Note I have a long list (over hundred props only components)

from reactscrollbar.

If you really need high performance scrolling with many elements, maybe take a look at https://github.com/bvaughn/react-virtualized. This library is great for smaller lists, but once you get to very large lists there only so much you can do.

from reactscrollbar.

I am facing similar issue. Any recommendation on scroller with better performance ? For > 100 elements, it's almost impossible to scroll up.

from reactscrollbar.