Scroll area

Native scrollable area with consistent styling across all browsers.

Import

import { ScrollArea } from "reshaped";
import type { ScrollAreaProps } from "reshaped";

Storybook

Scroll area stories

Usage

ScrollArea works with any type of content and, by default, stretches to the full size of the parent element. Depending on the size of the children, ScrollArea displays horizontal and/or vertical scrollbars.

Text content

<Card height="200px" padding={0}>
  <ScrollArea scrollbarDisplay="visible">
    <View height="300px" width="150%" align="center" justify="center">
      Text content
    </View>
  </ScrollArea>
</Card>

You can control the height and maxHeight values on the ScrollArea itself when its parent doesn't have a predefined size. Notice how the height property is moved to the ScrollArea in the following example.

Text content

<Card padding={0}>
  <ScrollArea scrollbarDisplay="visible" height="200px">
    <View height="300px" width="150%" align="center" justify="center">
      Text content
    </View>
  </ScrollArea>
</Card>

Scrollbar display

ScrollArea supports multiple display types for the scrollbars: visible, hover, and hidden. By default, it uses the hover display type, which only displays the scrollbars when the user hovers over the area. The hidden display type hides the scrollbar completely, which is useful for smaller components that might be scrollable but don't have space to display the scrollbar.

Text content

<Card padding={0}>
  <ScrollArea height="200px">
    <View height="300px" width="150%" align="center" justify="center">
      Text content
    </View>
  </ScrollArea>
</Card>

Resizable

Text