Comments (7)
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.
Related Issues (20)
- Migrating to the present HOT 3
- #129 is not in NPM HOT 4
- ScrollArea content should not get the focus when the user is scrolling HOT 4
- Update container size
- reactScrollbar is failed run with next.js HOT 2
- Page not scrollable vertically on Android, over container with horizontal scroll HOT 2
- The display state of the scroll bar has not been correlated with changes in the content area.
- Unable to perform Vertical Scroll using Touch pad in Internet Explorer and Edge.
- Horizontal scrollbar is not working HOT 3
- Firefox26, stopScrollPropagation is not working
- Warning on latest react version
- Firefox and mouse wheel - doesn't work.
- Top and bottom paddings in .scrollbar-container element
- 事件处理 HOT 1
- Zoom in Chrome.
- How to scroll to element
- scrollToBottom HOT 1
- Need help for horizontal scroll HOT 1
- Unable to preventDefault inside passive event listener invocation.
- ReferenceError: Cannot access '__WEBPACK_DEFAULT_EXPORT__' before initialization
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from reactscrollbar.