react-virtual scrolling to nested components
Hey,
I'm using react-virtual and for each virtual item im rendering a div with nested divs
so something like this:
<Element>
<div>
<h1>title</h1>
<div className=content>
<div id=1 />
<div id=2 />
<div id=3 />
</div>
</div>
</Element
let's say the div's inside the content dis has different height
and in given condition I want to scroll to div id 1, 2, or 3
there's a clean solution for that anyone had the chance to implement something similar?
7 Replies
optimistic-gold•3y ago
Maybe when calling scroll to index, store also
id of inner div, then wrap each nested div with component that will scroll into view on initial render based on that id and rest it after.rare-sapphireOP•3y ago
scroll the nested div by using the native browser scrollTo api?
optimistic-gold•3y ago
Yes, as we can scroll to index, then we know that the nested div will be rendered, so at intial render we can scroll it into view. If you can create codesandbox with example then we can try to impl this idea.
rare-sapphireOP•3y ago
@piecyk https://codesandbox.io/s/sharp-edison-is30k9?file=/src/main.tsx
let's say in a given condition (click for example) I want to scroll smoothly one of the nested <p /> (the elements with the red borders) into view (to the middle of the scrolling view)
golan_4163
CodeSandbox
sharp-edison-is30k9 - CodeSandbox
sharp-edison-is30k9 by golan_4163 using @faker-js/faker, @tanstack/react-virtual, react, react-dom
optimistic-gold•3y ago
Ok, will check it, just fyi if you could make the list flat then it would be most optimal solution
optimistic-gold•3y ago
Maybe something like this https://codesandbox.io/s/new-https-90cvfz?file=/src/main.tsx 🤔 still would recommend the flat list if that is an option
piecyk
CodeSandbox
new-https-90cvfz - CodeSandbox
new-https-90cvfz by piecyk using @faker-js/faker, @tanstack/react-virtual, react, react-dom
rare-sapphireOP•3y ago
Hey, flat list wont work for me unfortunately
But for now the solution I went for is to have a ref for each nested children inside a virtual item and scroll them into view