tessl/npm-radix-ui--react-scroll-area

A React component for creating accessible scroll areas with customizable scrollbars

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

Scrollbar System

Name: tessl/npm-radix-ui--react-scroll-area
Author: tessl

Customizable scrollbar components that support multiple display modes, orientations, and accessibility features.

Capabilities

ScrollAreaScrollbar

The scrollbar component that handles scrolling interaction for both horizontal and vertical orientations.

const ScrollAreaScrollbar: React.ForwardRefExoticComponent<
  ScrollAreaScrollbarProps & React.RefAttributes<ScrollAreaScrollbarElement>
>;

interface ScrollAreaScrollbarProps extends React.ComponentPropsWithoutRef<"div"> {
  /**
   * Scrollbar orientation
   * @default "vertical"
   */
  orientation?: "horizontal" | "vertical"; // default: "vertical"
  
  /**
   * Force mount the scrollbar regardless of visibility conditions
   * Useful for controlling animation with React animation libraries
   */
  forceMount?: true;
}

type ScrollAreaScrollbarElement = React.ComponentRef<"div">;

Usage Examples:

import { ScrollAreaScrollbar } from "@radix-ui/react-scroll-area";

// Vertical scrollbar (default)
<ScrollAreaScrollbar>
  <ScrollAreaThumb />
</ScrollAreaScrollbar>

// Horizontal scrollbar
<ScrollAreaScrollbar orientation="horizontal">
  <ScrollAreaThumb />
</ScrollAreaScrollbar>

// Force mounted scrollbar for animation control
<ScrollAreaScrollbar forceMount>
  <ScrollAreaThumb />
</ScrollAreaScrollbar>

ScrollAreaThumb

The draggable handle component within scrollbars that represents the current scroll position.

const ScrollAreaThumb: React.ForwardRefExoticComponent<
  ScrollAreaThumbProps & React.RefAttributes<ScrollAreaThumbElement>
>;

interface ScrollAreaThumbProps extends React.ComponentPropsWithoutRef<"div"> {
  /**
   * Force mount the thumb regardless of visibility conditions
   * Useful for controlling animation with React animation libraries
   * @default undefined
   */
  forceMount?: true;
}

type ScrollAreaThumbElement = React.ComponentRef<"div">;

Usage Examples:

import { ScrollAreaThumb } from "@radix-ui/react-scroll-area";

// Basic thumb
<ScrollAreaThumb />

// Force mounted thumb for animation control
<ScrollAreaThumb forceMount />

// Styled thumb
<ScrollAreaThumb 
  style={{ 
    backgroundColor: '#666',
    borderRadius: 4 
  }} 
/>

Component Aliases

Shorter alias components for scrollbar system.

const Scrollbar: typeof ScrollAreaScrollbar;
const Thumb: typeof ScrollAreaThumb;

Usage Examples:

import { Scrollbar, Thumb } from "@radix-ui/react-scroll-area";

<Scrollbar orientation="vertical">
  <Thumb />
</Scrollbar>

Display Modes

Auto Mode

Shows scrollbars only when content overflows the viewport.

<ScrollArea type="auto">
  <ScrollAreaViewport>
    <div>Content</div>
  </ScrollAreaViewport>
  <ScrollAreaScrollbar orientation="vertical">
    <ScrollAreaThumb />
  </ScrollAreaScrollbar>
</ScrollArea>

Always Mode

Always shows scrollbars regardless of content overflow.

<ScrollArea type="always">
  <ScrollAreaViewport>
    <div>Content</div>
  </ScrollAreaViewport>
  <ScrollAreaScrollbar orientation="vertical">
    <ScrollAreaThumb />
  </ScrollAreaScrollbar>
</ScrollArea>

Scroll Mode

Shows scrollbars during scroll events and user interaction.

<ScrollArea type="scroll">
  <ScrollAreaViewport>
    <div>Content</div>
  </ScrollAreaViewport>
  <ScrollAreaScrollbar orientation="vertical">
    <ScrollAreaThumb />
  </ScrollAreaScrollbar>
</ScrollArea>

Hover Mode

Shows scrollbars when hovering over the scroll area (default behavior).

<ScrollArea type="hover" scrollHideDelay={1000}>
  <ScrollAreaViewport>
    <div>Content</div>
  </ScrollAreaViewport>
  <ScrollAreaScrollbar orientation="vertical">
    <ScrollAreaThumb />
  </ScrollAreaScrollbar>
</ScrollArea>

Scrollbar Behavior

Automatic Positioning

Scrollbars are automatically positioned based on text direction:

LTR layouts: Vertical scrollbar on the right, horizontal scrollbar on the bottom
RTL layouts: Vertical scrollbar on the left, horizontal scrollbar on the bottom

Touch Support

Scrollbars support pointer events for desktop interaction
Touch scrolling uses native momentum scrolling on mobile devices
Drag interactions work with both mouse and touch input

Sizing and Styling

Thumb size automatically calculated based on content-to-viewport ratio
Minimum thumb size of 18px (matches macOS standards)
Custom CSS properties available for precise styling control
Scrollbar track padding respected for custom styling

Data Attributes

Components include data attributes for styling:

data-orientation="horizontal|vertical" on scrollbars
data-state="visible|hidden" indicating current visibility
data-radix-scroll-area-viewport on viewport elements

Event Handling

Wheel events are intercepted and managed for custom scrollbar behavior
Pointer capture prevents text selection during scrollbar dragging
Scroll behavior temporarily set to 'auto' during drag operations

Install with Tessl CLI

npx tessl i tessl/npm-radix-ui--react-scroll-area

docs

tessl/npm-radix-ui--react-scroll-area