Scroll Area

Overview

Scroll Area wrapped content in Radix UI Scroll Area so that overflowing content got a styled, cross-browser scrollbar instead of the native one.

This component is deprecated. Browsers now render restrained, theme-aware scrollbars of their own. New code should use a native scrollable element. Existing usage will be removed in a future release.

Migrating

Replace the component with an element that scrolls natively. Give it a height and an overflow, and leave the scrollbar alone — the browser draws one that already matches the user’s platform and colour scheme:

// Before
<ScrollArea className="h-48 max-w-lg">
  <div>{/* long content */}</div>
</ScrollArea>

// After
<div className="h-48 max-w-lg overflow-y-auto">
  <div>{/* long content */}</div>
</div>

Use overflow-x-auto for horizontal scrolling, in place of <ScrollBar orientation="horizontal" />.

Do not restyle the scrollbar. The styled-vertical-scrollbar and styled-horizontal-scrollbar utilities have been removed, and ::-webkit-scrollbar rules of your own are a WebKit-only fork of a control the browser already themes. Dialog and Sheet now scroll this way too.

Usage

Import the component:

import { ScrollArea } from "@eqtylab/equality";

Set a height on the Scroll Area and place your content inside:

<ScrollArea className="h-48 max-w-lg">
  <div>{/* long content */}</div>
</ScrollArea>

Example

Slots

Props

Scroll Area forwards the underlying Radix Scroll Area Root props (such as type and scrollHideDelay) in addition to the props below.