ScrollArea

A scrolling area whose scrollbars are drawn over its content rather than beside it - so a rounded panel keeps its corner clean - and show only while the pointer is over the area or focus is inside it.

Source

A scrolling area whose scrollbars are drawn over its content rather than beside it - so a rounded panel keeps its corner clean - and show only while the pointer is over the area or focus is inside it. Scrolling itself stays native: the wheel, the keyboard and touch work as they do anywhere. Each axis that overflows gets a track, down the right edge or along the bottom, whose thumb drags and whose track pages one view toward the pointer, as a native one does.

import { ScrollArea } from '@soroush.tech/design-system/ScrollArea'

;<ScrollArea maxHeight={240} aria-label="Notes" tabIndex={0}>
  {notes}
</ScrollArea>

Examples

Default

Note 1

Note 2

Note 3

Note 4

Note 5

Note 6

Note 7

Note 8

Note 9

Note 10

Note 11

Note 12

Note 13

Note 14

Note 15

Note 16

Note 17

Note 18

Note 19

Note 20

Note 21

Note 22

Note 23

Note 24

const args: Partial<ScrollAreaProps> = { maxHeight: 120, 'aria-label': 'Notes', tabIndex: 0 }

<Paper p={0}>
  <ScrollArea {...args} aria-label="Notes" tabIndex={0}>
    {list}
  </ScrollArea>
</Paper>

Sideways

Note 1

Note 2

Note 3

Note 4

Note 5

Note 6

Note 7

Note 8

Note 9

Note 10

Note 11

Note 12

Note 13

Note 14

Note 15

Note 16

Note 17

Note 18

Note 19

Note 20

Note 21

Note 22

Note 23

Note 24

const args: Partial<ScrollAreaProps> = { axes: 'x', 'aria-label': 'Notes', tabIndex: 0 }

<Paper p={0}>
  <ScrollArea {...args} aria-label="Tags" tabIndex={0}>
    <Flex flexDirection="row" gap={2} padding={2} width="max-content">
      {notes.map((note) => (
        <Typography key={note} variant="body2" whiteSpace="nowrap">
          {note}
        </Typography>
      ))}
    </Flex>
  </ScrollArea>
</Paper>

Both Ways

Note 1 - and a line that is wider than the area that holds it

Note 2 - and a line that is wider than the area that holds it

Note 3 - and a line that is wider than the area that holds it

Note 4 - and a line that is wider than the area that holds it

Note 5 - and a line that is wider than the area that holds it

Note 6 - and a line that is wider than the area that holds it

Note 7 - and a line that is wider than the area that holds it

Note 8 - and a line that is wider than the area that holds it

Note 9 - and a line that is wider than the area that holds it

Note 10 - and a line that is wider than the area that holds it

Note 11 - and a line that is wider than the area that holds it

Note 12 - and a line that is wider than the area that holds it

Note 13 - and a line that is wider than the area that holds it

Note 14 - and a line that is wider than the area that holds it

Note 15 - and a line that is wider than the area that holds it

Note 16 - and a line that is wider than the area that holds it

Note 17 - and a line that is wider than the area that holds it

Note 18 - and a line that is wider than the area that holds it

Note 19 - and a line that is wider than the area that holds it

Note 20 - and a line that is wider than the area that holds it

Note 21 - and a line that is wider than the area that holds it

Note 22 - and a line that is wider than the area that holds it

Note 23 - and a line that is wider than the area that holds it

Note 24 - and a line that is wider than the area that holds it

const args: Partial<ScrollAreaProps> = { axes: 'both', maxHeight: 160, 'aria-label': 'Notes', tabIndex: 0 }

<Paper p={0}>
  <ScrollArea {...args} aria-label="Table of notes" tabIndex={0}>
    <Flex flexDirection="column" gap={1} padding={2} width="max-content">
      {notes.map((note) => (
        <Typography key={note} variant="body2" whiteSpace="nowrap">
          {`${note} - and a line that is wider than the area that holds it`}
        </Typography>
      ))}
    </Flex>
  </ScrollArea>
</Paper>

In ARounded Panel

Note 1

Note 2

Note 3

Note 4

Note 5

Note 6

Note 7

Note 8

Note 9

Note 10

Note 11

Note 12

Note 13

Note 14

Note 15

Note 16

Note 17

Note 18

Note 19

Note 20

Note 21

Note 22

Note 23

Note 24

const args: Partial<ScrollAreaProps> = { maxHeight: 200, 'aria-label': 'Notes', tabIndex: 0 }

<Paper p={0} borderRadius="lg" overflow="hidden">
  <ScrollArea {...args} aria-label="Notes" tabIndex={0}>
    {list}
  </ScrollArea>
</Paper>