Scroll Area

The ScrollArea component offers a flexible, customizable container with scrollbars for overflowing content. Use it to display content that exceeds the visible area, supporting both horizontal and vertical scrolling.

Usage

import { ScrollArea } from '@harnessio/ui/components';

//...

return (
  <ScrollArea className="w-[300px] h-[200px] border">
    <div className="p-4 space-y-4 w-[700px]">
      <p>Content that exceeds the viewport height and width.</p>
      <p>More content...</p>
      <p>Even more content...</p>
    </div>
  </ScrollArea>
);

Directions

The ScrollArea component supports the direction prop to set the text direction. It accepts values like ltr (left-to-right) and rtl (right-to-left). The default value is ltr.

Scroll Events

The ScrollArea component provides several event handlers to respond to scroll actions:

• onScrollTop: Triggered when the scroll area is scrolled to the top.
• onScrollBottom: Triggered when the scroll area is scrolled to the bottom.
• onScrollLeft: Triggered when the scroll area is scrolled to the left.
• onScrollRight: Triggered when the scroll area is scrolled to the right.

It provides an IntersectionObserverEntry parameter that contains information about the scroll position and visibility of the target element.

rootMargin and threshold props can be used to customize the scroll event behavior. Use rootMargin to adjust the offset around the scroll area, and threshold to define how much of the target should be visible before triggering the scroll event.

API Reference

Prop	Required	Default	Type
children	true		ReactNode
direction	false	'ltr'	'ltr' | 'rtl'
className	false		string
classNameContent	false		string
onScrollTop	false		(entry: IntersectionObserverEntry) => void
onScrollBottom	false		(entry: IntersectionObserverEntry) => void
onScrollLeft	false		(entry: IntersectionObserverEntry) => void
onScrollRight	false		(entry: IntersectionObserverEntry) => void
rootMargin	false	'0px'	string | { top?: string; right?: string; bottom?: string; left?: string; }
threshold	false	0.1	number | number[]