ScrollArea

A scrollable area component which can be vertically or horizontally scrolled. It also supports the ability to maintain the scroll position between page refreshes or navigations.

Usage

Vertical Scroll

A scrollable area that is always vertically scrollable.

<ScrollArea id="verticalExample" type="always" direction="vertical">
  <Menu.Root
    items={[
      { value: 'home', label: 'Home', href: '#home' },
      { value: 'about', label: 'About', href: '#about' },
      { value: 'contact', label: 'Contact', href: '#contact' },
      { value: 'help', label: 'Help', href: '#help' },
      { value: 'login', label: 'Login', href: '#login' },
      { value: 'comment', label: 'Comment', href: '#comment' },
    ]}
    defaultValue="home"
  />
</ScrollArea>

Horizontal Scroll

A scrollable area that is always horizontally scrollable.

<ScrollArea id="horizontalExample" type="always" direction="horizontal">
  <Flex height="100%" align={'center'}>
    <Typography.Text size="5">
      {`Three fundamental aspects of typography are legibility, readability, and aesthetics. Although in a non-technical sense "legible" and "readable" are often used
                synonymously, typographically they are separate but related concepts.`}
    </Typography.Text>
    <Typography.Text size="6">
      {`Legibility describes how easily individual characters can be distinguished from one another. It is described by Walter Tracy as "the quality of being decipherable
                and recognisable". For instance, if a "b" and an "h", or a "3" and an "8", are difficult to distinguish at small sizes, this is a problem of legibility.`}
    </Typography.Text>
    <Typography.Text size="5">
      {`Legibility describes how easily individual characters can be distinguished from one another. It is described by Walter Tracy as "the quality of being decipherable
                and recognisable". For instance, if a "b" and an "h", or a "3" and an "8", are difficult to distinguish at small sizes, this is a problem of legibility.`}
    </Typography.Text>
    <Typography.Text size="4">
      {`Legibility describes how easily individual characters can be distinguished from one another. It is described by Walter Tracy as "the quality of being decipherable
                and recognisable". For instance, if a "b" and an "h", or a "3" and an "8", are difficult to distinguish at small sizes, this is a problem of legibility.`}
    </Typography.Text>
  </Flex>
</ScrollArea>

Persistent Scroll

Stores and retrieves the scroll position using the session storage.

<ScrollArea id="persistentExample" persistent type="always" direction="vertical">
  <Menu.Root
    items={[
      { value: 'home', label: 'Home', href: '#home' },
      { value: 'about', label: 'About', href: '#about' },
      { value: 'contact', label: 'Contact', href: '#contact' },
      { value: 'help', label: 'Help', href: '#help' },
      { value: 'login', label: 'Login', href: '#login' },
      { value: 'comment', label: 'Comment', href: '#comment' },
    ]}
    defaultValue="home"
  />
</ScrollArea>

API

Props

Prop	Type	Default	Required
className	string	-	-
style	CSSProperties	-	-
children	ReactNode	-	-
id	string	-	Yes
type	'always' | 'auto'	'always'	-
scrollbars	'vertical' | 'horizontal'	'vertical'	-
persistent	boolean	false	-
invisible	boolean	false	-
MarginProps	Token<MarginProps>	-	-
PaddingProps	Token<PaddingProps>	-	-
color	ThemeAccentColor	-	-
radius	ThemeRadius	-	-
size	Responsive<Size>	'medium'	-