Dioxus Componentsdioxus

Scrollable content item 1

Scrollable content item 2

Scrollable content item 3

Scrollable content item 4

Scrollable content item 5

Scrollable content item 6

Scrollable content item 7

Scrollable content item 8

Scrollable content item 9

Scrollable content item 10

Scrollable content item 11

Scrollable content item 12

Scrollable content item 13

Scrollable content item 14

Scrollable content item 15

Scrollable content item 16

Scrollable content item 17

Scrollable content item 18

Scrollable content item 19

Scrollable content item 20

Installation

Use the CLI command for the common path, or copy the component files manually.

Manual installation files

Copy the component source and CSS into your app. Import the shared theme CSS once near your app root.

use dioxus::prelude::*;
use dioxus_primitives::scroll_area::{self, ScrollAreaProps};

#[component]
pub fn ScrollArea(props: ScrollAreaProps) -> Element {
    scroll_area::ScrollArea(props)
}

Usage notes

The ScrollArea component is used to create a scrollable container for its children. It can be used to enable scrolling for content that overflows the available space.

Component Structure

// The ScrollArea component wraps all scrollable content.
ScrollArea {
    // The direction in which the scroll area can scroll. Can be one of Horizontal, Vertical, or Both.
    scroll_direction: ScrollDirection::Vertical,
    // The content of the scrollable area
    {children}
}

Direction / RTL

ScrollArea accepts a dir: Option<Direction> prop, emitted as dir/data-direction on the root. This component wraps the browser's own native scrollbar (not a custom-drawn one), so the CSS Overflow spec's own dir-relative behavior repositions the scrollbar to the correct physical side automatically -- no additional logic is needed. See the rtl variant.

Variants

Alternative examples for common configurations.

rtl