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}>