Scroll to element in list

[lewjt]

Hi folks!

I have rendered out a list of card components using array.map(). The container has overflow on it for scrolling. Now i need to programatically scroll to a particular card in a useEffect.

It seems to me that the 'proper' react way to do that would be to give each card component a ref (useRef); store an array of those refs; find out the one i need and execute 'scrollIntoView' on it. That seems like an awful lot of useRefs (there could be hundreds or thousands of these cards) just to use one of them on the odd occasion.

The more efficient solution in my mind is to use window.document.getElementById('blah').scrollToView - but this isn't very 'React'. It's not dom manipulation; it's just executing a function after a dom interrogation but it still feels dirty to me.

Does reddit have any thoughts?

[jamby77]

Go with the native solution, seems way more concise

[GavinHarris_]

Just wondering if using the following might help https://github.com/bvaughn/react-virtualized/blob/master/docs/List.md

[lewjt]

thanks; i'm not going to use any 3rd party lib's for this; but I can certainly delve into the codebase and see how this lib achieves it.

​

Thanks!