Scroll Area

ScrollArea is a Radix UI ScrollArea. It augments native scroll functionality for custom, cross-browser styling.

Basic usage

import { ScrollAreaComposed, List, ListItem } from '@streamelements/frontend-ui';

export function MyComponent() {
  return <ScrollAreaComposed css={{ maxWidth: 200 }} viewportCss={{ maxHeight: 200 }}>
    <div
      style={{
        height: 1000,
        backgroundImage:
          'repeating-linear-gradient(180deg, dodgerblue, dodgerblue 10px, transparent 10px, transparent 20px)',
      }}
    />
  </ScrollAreaComposed>;
}

Horizontal Scroll

import { ScrollAreaComposed, List, ListItem } from '@streamelements/frontend-ui';

export function MyComponent() {
  return <ScrollAreaComposed css={{ width: 300, height: 200 }} orientation="horizontal">
    <div
      style={{
        width: 500, 
        height: 200,
        backgroundImage:
          'repeating-linear-gradient(-45deg, dodgerblue, dodgerblue 10px, transparent 10px, transparent 20px)',
      }}
    />
  </ScrollAreaComposed>;
}

API

Name	Type	Default value	Description
type	"auto" | "always" | "scroll" | "hover"	hover	Describes the nature of scrollbar visibility, similar to how the scrollbar preferences in MacOS control visibility of native scrollbars. More on Radix' docs
scrollHideDelay	number	600	Determines the length of time, in milliseconds, before the scrollbars are hidden after the user stops interacting with scrollbars when type is 'hover' | 'scroll'
dir	ltr | rtl	ltr	The reading direction of the scroll area.
orientation	horizontal | vertical	vertical	The orientation of the scrollbar (this also affects scroll direction)
convertNativeScrollToHorizontal	boolean	–	Whether to scroll horizontally on regular mouse-wheel scrolling. Defaults to "true" when orientation === "horizontal"
forceMount	boolean	false	Whether to always mount the scrollbar to the DOM. Otherwise, mounted only when it is visible.
css	CSS	{}	Pass on additional styling utilizing Stitches' tokens
viewportCss	CSS	{}	Handy when applying inline one-offs using Stitches' css prop API
classes	Classes object	{}	API for custom styles using classNames.

Classes

Element	Type	Description
root	string	Sets the class on the root ScrollArea node. You can use this to limit the width of the component.
viewport	string	Sets the class on the content-wrapping container node

Composing a scroll area

Sometimes you need more control, or access to individual elements of a scroll area, like viewport or the scroll bars. One such use-case is when needing to customize the scroller of a react-virtuoso scroller component. Which requires ref access to the our component's scrolling element – which is the Viewport.

ScrollAreaRoot

The Root is the wrapping element of scroll area. It serves as the parent to ScrollAreaViewport and ScrollAreaScrollbar.

Prop	Type	Default
asChild	boolean	false
type	auto | always | scroll | hover	hover
scrollHideDelay	number	600
css	object	-

ScrollAreaViewport

The viewport of a scrolling area.

Prop	Type	Default
asChild	boolean	false
convertNativeScrollToHorizontal	boolean	false
css	object	-

ScrollAreaScrollbar

The viewport of a scrolling area.

Prop	Type	Default
asChild	boolean	false
forceMount	boolean	false
orientation	vertical | horizontal	false

FAQ

Height based on parent

But wait! Darko! What about relying on the parent for height?

• That's fine! The component by default has width and height of 100%. Just don't provide maxHeight on the viewportCss and make sure the parent has a set height instead.