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>

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.

<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="200px" fade>
      <View padding={1}>
        {[...Array(20)].map((_, index) => (
          <MenuItem key={index}>Item {index + 1}</MenuItem>
        ))}
      </View>
    </ScrollArea>
  </Card>
</View>