"scroll-area" viewport access

[Rafirvan]

Hello there, i want to share a component edit i have been using. a conditionally invoked access to Radix's scrollAreaViewport component. scrollAreaViewport gives access to "onScroll" prop, and some important css like scroll snapping and overscroll behaviour among others.

import * as React from "react"
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"

import { cn } from "@/lib/utils"

const ScrollArea = React.forwardRef<
  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
  >(({ className, children, ...props }, ref) => {
  // check if user uses scrollAreaViewport...
  const hasViewportChild = React.Children.toArray(children).some(
    (child) => React.isValidElement(child) && child.type === ScrollAreaViewport
  );

  return (
    <ScrollAreaPrimitive.Root
      ref={ref}
      className={cn("relative overflow-hidden", className)}
      {...props}
    >

      {/*...then renders conditionally */}
      {hasViewportChild ? (children)
        :
        (
        <ScrollAreaViewport>
          {children}
        </ScrollAreaViewport>
      )}
      <ScrollBar />
      <ScrollAreaPrimitive.Corner />
    </ScrollAreaPrimitive.Root>
  );
});
ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName

const ScrollAreaViewport = React.forwardRef<
  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaViewport>,
  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaViewport>
  >(({ className, children, ...props }, ref) =>
  {
    return(
  <ScrollAreaPrimitive.Viewport
    ref={ref}
    className={cn("h-full w-full rounded-[inherit]", className)}
    {...props}
  >
    {children}
  </ScrollAreaPrimitive.Viewport>
  )}
);
  
ScrollAreaViewport.displayName = ScrollAreaPrimitive.ScrollAreaViewport.displayName;


const ScrollBar = React.forwardRef<
  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
>(({ className, orientation = "vertical", ...props }, ref) => (
  <ScrollAreaPrimitive.ScrollAreaScrollbar
    ref={ref}
    orientation={orientation}
    className={cn(
      "flex touch-none select-none transition-colors",
      orientation === "vertical" &&
      "h-full w-2.5 border-l border-l-transparent p-[1px]",
      orientation === "horizontal" &&
      "h-2.5 border-t flex-col border-t-transparent p-[1px]",
      className
    )}
    {...props}
  >
    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
  </ScrollAreaPrimitive.ScrollAreaScrollbar>
))
ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName

export { ScrollArea, ScrollAreaViewport ,ScrollBar }

now you can either use
<ScrollArea className="...">{children}</ScrollArea>

or

<ScrollArea className="..."> <ScrollAreaViewport className="..."> {children} </ScrollAreaViewport> </ScrollArea>

to access viewport props and classes.

if there is any bugs related to this please report back here. Cheers.

[damien-schneider]

I completely agree—this is a crucial improvement. Typically, the classes or refs passed to the root component aren’t as necessary as those applied to the viewport. Ideally, these should be forwarded directly to the viewport by default. This change would make the base component much more flexible and practical for most use cases.

And so the solution you've provided is even better and more flexible, it's the only component where I often use the radix primite directly for those reasons.

[yingw787]

@Rafirvan you are a lifesaver! Thank you!!

[Rafirvan]

Just updated the code slightly to reflect more recent changes.

would definitely be nice for this to be an official feature, if anybody wants to put this on a pull request go ahead