pub fn ScrollableView(_: ScrollableViewProps) -> ElementExpand 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.
id:Option<String>class:Stringstyle:Stringon_mouse_move:Option<EventHandler<MouseEvent>>on_mouse_up:Option<EventHandler<MouseEvent>>on_mouse_down:Option<EventHandler<MouseEvent>>on_scroll:Option<EventHandler<ScrollState>>children:Elementattributes:Vec<Attribute>