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

Handles horizontal and vertical scrolling

Ref access to the scrollable element for programmatic scrolling

Supports user click and drag events

Multiple types of scrollbar visibility

Usage

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


<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 moved to the ScrollArea in the following example.


<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's using the hover display type which only displays the scrollbars when user hovers over the area. hidden display type hides it completely, which is useful for smaller components that might be scrollable but don't have space to display the scrollbar.


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

Contents

Usage
Scrollbar display