Edit Component
Adding Scroll-RS to your project is simple:
-
Make sure your project is set up with Yew. Refer to their Getting Started Guide for setup instructions.
-
Add scroll-rs to your dependencies:
cargo add scroll-rs --features=yew
-
Import Scroll into your component and start enhancing your app’s scroll functionality.
Below is an example of how to integrate scroll-rs into your Yew app:
use scroll_rs::yew::Scroll;
use scroll_rs::Behavior;
use yew::prelude::*;
#[function_component(Home)]
pub fn home() -> Html {
html! {
<div class="min-h-screen bg-gray-900 text-white p-8">
<h1 class="text-4xl font-bold text-center mb-8">{ "Scroll-RS Demo" }</h1>
// Scrollable content
<div id="top" class="h-96 bg-gray-700 p-8 text-center">
<h2 class="text-3xl font-bold">{ "Top of the Page" }</h2>
<p>{ "Scroll down to see buttons in action!" }</p>
</div>
<div id="bottom" class="h-96 bg-gray-800 p-8 text-center">
<h2 class="text-3xl font-bold">{ "Bottom of the Page" }</h2>
<p>{ "You reached the bottom!" }</p>
</div>
// Scroll components
<Scroll
style="position: fixed; bottom: 2rem; right: 2rem; background: #10B981; padding: 1rem; border-radius: 50%;"
icon={html! { <span>{"↑"}</span> }}
scroll_id="top"
/>
<Scroll
style="position: fixed; bottom: 2rem; left: 2rem; background: #F59E0B; padding: 1rem; border-radius: 50%;"
icon={html! { <span>{"↓"}</span> }}
scroll_id="bottom"
/>
</div>
}
}
| Property | Type | Description | Default |
|---|
style | &'static str | Inline CSS styles for the scroll button. | Default styling |
class | &'static str | Custom CSS classes for styling the button. | None |
icon | Html | Custom icon (HTML/SVG) for the scroll button. | Default SVG |
behavior | Behavior | Scrolling behavior: Smooth, Instant. | Smooth |
top | f64 | Target top position for scrolling. | 0.0 |
left | f64 | Target left position for scrolling (horizontal scrolling). | 0.0 |
offset | f64 | Offset to apply when scrolling to the target position. | 0.0 |
delay | u32 | Delay (in ms) before initiating the scroll. | 0 |
auto_hide | bool | Whether to hide the button automatically based on scroll position. | true |
threshold | f64 | Scroll threshold to determine button visibility. | 20.0 px |
update_hash | bool | Whether to update the URL hash during scrolling. | true |
show_id | &'static str | ID of the target element for the scroll button visibility logic. | None |
scroll_id | &'static str | ID of the target container to scroll to. | None |
You can import Scroll RS directly into your project to customize and modify it using the opensass cli:
os add scroll-rs yew
Edit Component
Adding Scroll-RS to your Dioxus project is easy:
-
Make sure your project is set up with Dioxus. Refer to the Dioxus Getting Started Guide for setup instructions.
-
Add scroll-rs to your dependencies:
cargo add scroll-rs --features=dio
-
Import Scroll into your component and start enhancing your app’s scroll functionality.
Here’s an example of integrating scroll-rs into your Dioxus app:
use scroll_rs::dioxus::Scroll;
use scroll_rs::Behavior;
use dioxus::prelude::*;
#[component]
pub fn Home() -> Element {
rsx! {
div {
class: "min-h-screen bg-gray-900 text-white p-8",
h1 {
class: "text-4xl font-bold text-center mb-8",
"Scroll-RS Demo"
}
// Scrollable content
div {
id: "top",
class: "h-96 bg-gray-700 p-8 text-center",
h2 {
class: "text-3xl font-bold",
"Top of the Page"
}
p { "Scroll down to see buttons in action!" }
}
div {
id: "bottom",
class: "h-96 bg-gray-800 p-8 text-center",
h2 {
class: "text-3xl font-bold",
"Bottom of the Page"
}
p { "You reached the bottom!" }
}
// Scroll components
Scroll {
style: "position: fixed; bottom: 2rem; right: 2rem; background: #10B981; padding: 1rem; border-radius: 50%;",
icon: rsx! { span { "↑" } },
scroll_id: "top"
}
Scroll {
style: "position: fixed; bottom: 2rem; left: 2rem; background: #F59E0B; padding: 1rem; border-radius: 50%;",
icon: rsx! { span { "↓" } },
scroll_id: "bottom"
}
}
}
}
| Property | Type | Description | Default |
|---|
style | &'static str | Inline CSS styles for the scroll button. | Default styling |
class | &'static str | Custom CSS classes for styling the button. | None |
icon | Element | Custom icon (HTML/SVG) for the scroll button. | Default SVG |
behavior | Behavior | Scrolling behavior: Smooth, Instant. | Smooth |
top | f64 | Target top position for scrolling. | 0.0 |
left | f64 | Target left position for scrolling (horizontal scrolling). | 0.0 |
offset | f64 | Offset to apply when scrolling to the target position. | 0.0 |
delay | u32 | Delay (in ms) before initiating the scroll. | 0 |
auto_hide | bool | Whether to hide the button automatically based on scroll position. | true |
threshold | f64 | Scroll threshold to determine button visibility. | 20.0 px |
update_hash | bool | Whether to update the URL hash during scrolling. | true |
show_id | &'static str | ID of the target element for the scroll button visibility logic. | None |
scroll_id | &'static str | ID of the target container to scroll to. | None |
You can import Scroll RS directly into your project to customize and modify it using the opensass cli:
os add scroll-rs dio
Edit Component
Adding Scroll-RS to your Leptos project is simple:
-
Make sure your project is set up with Leptos. Refer to their Getting Started Guide for setup instructions.
-
Add scroll-rs to your dependencies:
cargo add scroll-rs --features=lep
-
Import Scroll into your component and start enhancing your app’s scroll functionality.
Below is an example of how to integrate scroll-rs into your Leptos app:
use leptos::*;
use scroll_rs::leptos::Scroll;
use scroll_rs::Behavior;
#[component]
pub fn Home() -> impl IntoView {
view! {
<div class="min-h-screen bg-gray-900 text-white p-8">
<h1 class="text-4xl font-bold text-center mb-8">"Scroll-RS Demo"</h1>
// Scrollable content
<div id="top" class="h-96 bg-gray-700 p-8 text-center">
<h2 class="text-3xl font-bold">"Top of the Page"</h2>
<p>"Scroll down to see buttons in action!"</p>
</div>
<div id="bottom" class="h-96 bg-gray-800 p-8 text-center">
<h2 class="text-3xl font-bold">"Bottom of the Page"</h2>
<p>"You reached the bottom!"</p>
</div>
// Scroll components
<Scroll
style="position: fixed; bottom: 2rem; right: 2rem; background: #10B981; padding: 1rem; border-radius: 50%;"
icon="↑"
scroll_id="top"
/>
<Scroll
style="position: fixed; bottom: 2rem; left: 2rem; background: #F59E0B; padding: 1rem; border-radius: 50%;"
icon="↓"
scroll_id="bottom"
/>
</div>
}
}
| Property | Type | Description | Default |
|---|
style | &'static str | Inline CSS styles for the scroll button. | Default styling |
class | &'static str | Custom CSS classes for styling the button. | None |
icon | &'static str | Custom icon (HTML/SVG) for the scroll button (TODO: Change Type to View<>). | Default SVG |
behavior | Behavior | Scrolling behavior: Smooth, Instant. | Smooth |
top | f64 | Target top position for scrolling. | 0.0 |
left | f64 | Target left position for scrolling (horizontal scrolling). | 0.0 |
offset | f64 | Offset to apply when scrolling to the target position. | 0.0 |
delay | u32 | Delay (in ms) before initiating the scroll. | 0 |
auto_hide | bool | Whether to hide the button automatically based on scroll position. | true |
threshold | f64 | Scroll threshold to determine button visibility. | 20.0 px |
update_hash | bool | Whether to update the URL hash during scrolling. | true |
show_id | &'static str | ID of the target element for the scroll button visibility logic. | None |
scroll_id | &'static str | ID of the target container to scroll to. | None |
TODO
You can import Scroll RS directly into your project to customize and modify it using the opensass cli:
os add scroll-rs lep