Skip to main content

ScrollableView

Function ScrollableView 

Source
pub fn ScrollableView(_: ScrollableViewProps) -> Element
Expand description

A scrollable container that provides context for floating elements.

ScrollableView is the core component of the library. It tracks its own position, dimensions, and scroll state, providing this data via context to child hooks like use_placement.

§Note on Styles:

Ensure you provide height and overflow styles (e.g., h-full overflow-auto) via the class or style props, as the component does not apply them by default.

§Example

use dioxus::prelude::*;
use dioxus_floating::{use_scroll_context, ScrollableView, ScrollState};

#[component]
fn MyComponent() -> Element {
    rsx! {
        ScrollableView {
            class: "h-screen w-full overflow-y-auto",
            on_scroll: move |state: ScrollState| println!("Scrolled to: {}", state.state.y),
        
            div { class: "h-[2000px]", "Very long content..." }
        
            // Any floating elements inside will be positioned correctly
            MyDropdown {}
        }
    }
}

#[component]
fn MyDropdown() -> Element { let ctx = use_scroll_context(); rsx! {} }

§Props

For details, see the props struct definition.