Seeking Advice on Dynamically Calculating Element Height and Adjusting Scroll Position in a React P
Hello, I'm seeking assistance with managing scroll positions in a project using React and react-virtual, specifically for an infinite scroll list implementation where elements are dynamically added to the top of the list. Each element's height can change dynamically, necessitating appropriate adjustments to the scroll position to account for the added elements' heights. However, when adding elements and calculating the scroll position, I encounter flickering issues on the screen.
You can access my code through the following CodeSandbox React Virtual Infinite Scroll Implementation. The implementation details are primarily in App.tsx.
CodeSandbox
https://codesandbox.io/p/devbox/react-virtual-n55rt7?embed=1&file=%2Fsrc%2FApp.tsx%3A37%2C7
I'm looking for methods to prevent scroll position flickering when dynamically adding elements and efficient techniques to calculate the heights of dynamic elements. Additionally, if there are libraries or frameworks recommended for this scenario, I'm eager to learn about them.
If anyone has experience or knowledge regarding this issue, your advice would be greatly appreciated. Thank you in advance.
3 Replies
ambitious-aqua•2y ago
Hi, you can check the discusion here https://github.com/TanStack/virtual/pull/400#issuecomment-1396820663
ambitious-aqua•2y ago
looks like can't access the examples becaouse of codesandbox
ambitious-aqua•2y ago
@shun checkout the comment here https://github.com/TanStack/virtual/discussions/704#discussioncomment-9083664 created quick example for adding elements to the beginning of the list
GitHub
Is Bidirectional with infinite scroll supported? · TanStack virtual...
Has anyone been able to create a bidirectional list with infinite scroll? From what I have found the scroll position is not restored when new items are added to the top. It would be really nice wit...