Proposal ScrollArea | Make it possible to control Scroll Area programmatically

[joseDaKing]

It should be possible to control Scroll Area programmatically, I think it should also support custom easing functions, or perhaps it should be able to integrate with other animations libraries. Here is an example how it could look like:

const Component = () => {
  
  const scrollArea = useScrollArea();

  // Ref used some where in a component inside ScrollArea component
  const ref = useRef();

  const onClickHandler = () => {
    scrollArea.scrollToElement(ref)
    // or
    scrollArea.scrollToTop();
    // or
    scrollArea.scrollToBottom();
  }
  return (
    <>
      <button onClikc={onClickHandler}>
        Scroll To
      </button>
      <ScrollArea.Root>
        ...
      </ScrollArea.Root>
    </>
  );
}

[benoitgrelard]

Hi @joseDaKing,

As I explained in your other discussion post (#989 (comment)) you have full access to the underlying scrolling div, so you can totally control it programatically.

Here's an example:
https://codesandbox.io/s/scrollarea-programatic-q66k7

[max-programming]

Just fyi the sandbox no longer exists

[engdlee]

If anyone stumbles upon this, this is how to do it:

const Component = () => {
  
  const viewportRef = useRef<HTMLDivElement>(null);

  const onClickHandler = () => {
    if (viewportRef !== null && viewportRef.current !== null) {
            // here scroll, Ex: to the right
            viewportRef.current.scrollLeft += 50;
        }
  }

  return (
    <>
      <button onClikc={onClickHandler}>
           Scroll To Right
      </button>
      <ScrollArea.Root>
          // Here you need to add the ref, and this is what you will scroll programmatically, the VIEWPORT not the Root
          <ScrollArea.Viewport ref={viewportRef} className="w-full h-full rounded">
      </ScrollArea.Root>
    </>
  );
}

If you are using shadcn, extend the props so you can pass the ref to the Viewport :

interface ScrollAreaProps
    extends React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> {
    viewportRef: Ref<HTMLDivElement>;
}

const ScrollArea = React.forwardRef<
    React.ElementRef<typeof ScrollAreaPrimitive.Root>,
    ScrollAreaProps
>(({ className, children, viewportRef, ...props }, ref) => (
    <ScrollAreaPrimitive.Root
        ref={ref}
        className={cn('relative overflow-hidden', className)}
        {...props}
    >
        <ScrollAreaPrimitive.Viewport
            ref={viewportRef}
            className="h-full w-full rounded-[inherit]"
        >
            {children}
        </ScrollAreaPrimitive.Viewport>
        <ScrollBar />
        <ScrollAreaPrimitive.Corner />
    </ScrollAreaPrimitive.Root>
));
ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;

[AthulGeorge117]

What are the chances that the day I need a solution for this is the day u post the answer, lol. Thanks so much.

[matiduda]

Thank you!

[Willem-Jaap]

Thanks for this!

[kulchanbinod]

Thank you for this!

There is a small typo on this line.
<button onClikc={onClickHandler}>
should be
<button onClick={onClickHandler}>

[Rick-Phoenix]

If you tried to do this and your scrollarea won't go all the way to the bottom, it's because you have to let the component load synchronously first, otherwise the calculated height for the div won't be the updated one.

In order to do so you just have to make the scrolling event async with this little trick:

  const scrollToBottom = () => {
    if (viewportRef !== null && viewportRef.current !== null) {
      setTimeout(() => {
        const scrollArea = viewportRef.current!;
        scrollArea.scroll({ behavior: "smooth", top: scrollArea.scrollHeight });
      }, 0);
    }
  };

As you can see you can even put 0ms for the timeout, what matters is that by making the event asynchronous you let the call stack execute first (which renders your new component) and then you get the correct value for the scrollHeight.