Scroll area

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.

<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.

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

By default, ScrollArea scrolls in both directions whenever the content is larger than the area. Pass the orientation property to limit the scrolling to a single direction. Besides locking the scroll, it also constrains the content size on the other axis, so the content wraps or shrinks instead of overflowing it.

<Card padding={0} height="200px">
  <ScrollArea orientation="vertical">
    <View height="600px" />
  </ScrollArea>
</Card>

ScrollArea supports multiple display types for the scrollbars: visible, hover, scroll, and hidden. By default, it uses the hover display type, which only displays the scrollbars when the user hovers over the area. The scroll display type only displays them while the area is being scrolled, keeping the content clean when the user isn't interacting with it. 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.

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

Enable the fade property to render a fade mask on the edges the content can still be scrolled towards. The mask appears only on the sides with more content and disappears once you reach an edge, giving your scrollable regions a cleaner boundary without any extra markup. It works for both horizontal and vertical scrolling and is powered by CSS scroll-driven animations.

<View width="280px">
  <Card padding={0} raised>
    <ScrollArea height="180px" fade>
      <View padding={1}>
        {[...Array(20)].map((_, index) => (
          <MenuItem key={index}>Item {index + 1}</MenuItem>
        ))}
      </View>
    </ScrollArea>
  </Card>
</View>