ScrollArea

Import
import { ScrollArea } from "reshaped";
import type { ScrollAreaProps } from "reshaped";
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


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>

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>