Scroll Area

Live Editor

function ScrollAreaDemo() {
  return (
    <ThemeProvider>
      <ScrollArea
        orientation="vertical"
        size="md"
        shadows
        onScrollChange={(detail) => console.log(detail.progressY)}
      >
        <div style={{ height: 480 }}>Scrollable content</div>
      </ScrollArea>
    </ThemeProvider>
  );
}

Result

Loading...

Key Props

orientation, size, variant, tone, autoHide, shadows, onScrollChange, onReachStart, onReachEnd