Skip to main content
The Scroll Area component provides a customizable scrollable container with styled scrollbars that appear on hover or during scrolling.

​
Basic Usage

import reflex_ui as ui

ui.scroll_area(
    rx.vstack(
        *[rx.text(f"Item {i}") for i in range(100)],
        spacing="0.5rem"
    ),
    class_name="h-64 w-full"
)

​
Horizontal Scrolling

ui.scroll_area(
    rx.hstack(
        *[rx.box(f"Item {i}", min_width="200px") for i in range(20)],
        spacing="1rem"
    ),
    orientation="horizontal",
    class_name="w-full"
)

​
Component Structure

For more control, use the component parts: 
ui.scroll_area.root(
    ui.scroll_area.viewport(
        ui.scroll_area.content(
            # Your scrollable content here
            rx.vstack(
                *[rx.text(f"Line {i}") for i in range(50)]
            )
        )
    ),
    ui.scroll_area.scrollbar(
        ui.scroll_area.thumb(),
        orientation="vertical"
    ),
    class_name="h-96 w-full"
)

​
Both Scrollbars

ui.scroll_area.root(
    ui.scroll_area.viewport(
        ui.scroll_area.content(
            # Large content
            rx.box(
                width="2000px",
                height="2000px",
                background="linear-gradient(45deg, #ccc 25%, transparent 25%)"
            )
        )
    ),
    ui.scroll_area.scrollbar(
        ui.scroll_area.thumb(),
        orientation="vertical"
    ),
    ui.scroll_area.scrollbar(
        ui.scroll_area.thumb(),
        orientation="horizontal"
    ),
    ui.scroll_area.corner(),
    class_name="h-96 w-full"
)

​
Props Reference

​
High-Level Props

​
orientation
Literal['horizontal', 'vertical']
default:"vertical"
Orientation of the scroll area
​
keep_mounted
bool
default:"False"
Whether to keep the scrollbar HTML element in the DOM when the viewport isn’t scrollable

​
Scrollbar Props

​
orientation
Literal['horizontal', 'vertical']
default:"vertical"
Orientation of the scrollbar
​
keep_mounted
bool
default:"False"
Whether to keep the HTML element in the DOM when the viewport isn’t scrollable
​
class_name
str
Additional CSS classes for styling

​
Styling

From source code at reflex_ui/components/base/scroll_area.py:16-26:
  • Root: Full height with no outline
  • Viewport: Full height with overscroll containment
  • Scrollbar: Touch-friendly with smooth opacity transitions, appears on hover or scrolling
  • Thumb: Rounded with secondary alpha color
  • Corner: Small rectangular area at scrollbar intersection
Scrollbars fade in on hover or scroll and fade out after a delay:
  • Opacity transitions with 200ms delay
  • 0ms delay when hovering or scrolling
  • 100ms duration for smooth appearance

​
Implementation Details

From source code at reflex_ui/components/base/scroll_area.py:153-190:
  • High-level API automatically creates root, viewport, content, and scrollbar
  • Scrollbars automatically show/hide based on content overflow
  • Thin scrollbar styling with scrollbar-width:thin
  • Supports both horizontal and vertical scrolling
  • Optional corner element for dual-scrollbar layouts

Build docs developers (and LLMs) love

Get started for freeTalk to us