Skip to content
github

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.

Variations

Directions

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

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.

Each handler receives an IntersectionObserverEntry describing the position and visibility of the edge sentinel.

rootMargin and threshold customize when the events fire. 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.

Installation

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


//...


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