Manage scroll programmatically

[olup]

Is there a way go get to the scrollable element of the scrollarea to manage scroll programmatically ? And / or to assign an id to it ? I am having a hard time implementing a typewriter effect with it, and plug it with lazy load library.

[jjenzz]

This will all be much easier when we release the new version:

const viewportRef = React.useRef<React.ElementRef<typeof ScrollArea.Viewport>>(null);

React.useEffect(() => {
  viewportRef.current?.scrollTop = 100;
}, []);

return (
	<ScrollArea.Root type="hover" scrollHideDelay={600}>
  		<ScrollArea.Viewport ref={viewportRef} id="whatever-you-like">
			Lots of content...
  		</ScrollArea.Viewport>
  		<ScrollArea.Scrollbar orientation="horizontal">
    		<ScrollArea.Thumb />
  		</ScrollArea.Scrollbar>
  		<ScrollArea.Scrollbar orientation="vertical">
    		<ScrollArea.Thumb />
  		</ScrollArea.Scrollbar>
  		<ScrollArea.Corner />
	</ScrollArea.Root>
);

[olup]

This is code for the present version ? May I ask, is there a rough ETA for the next one ?

[benoitgrelard]

This code is for the next version. We are hoping to get it out as soon as we complete adding support for sub-menus which is almost there.

[olup]

Sweet. Can't wait.

[benoitgrelard]

Hey @olup, this was now released today.
https://radix-ui.com/primitives/docs/components/scroll-area