feat(html): add scroll method to MountedData (#3722)

* feat(html): add `scroll` method to MountedData

* feat(desktop): implement `scroll` method for DesktopElement

* feat(liveview): implement `scroll` method for LiveviewElement

* feat(web): implement `scroll` method for web_sys::Element

* docs(examples): add new example for `scroll` method

* fix(web): remove unncecessary f64 cast (clippy)

* fix(interpreter): return missing boolean from js

* docs(example): unwrap result instead of discarding its error

* docs(examples): create scroll restoring example on routing

* fix clippy

---------

Co-authored-by: Jonathan Kelley <jkelleyrtp@gmail.com>
This commit is contained in:
Youn MéloisandJonathan Kelley authored and GitHub committed 2025-05-07 12:45:47 -07:00
1 parent 60c1b0ead6
commit 85b373deff
11 files changed
+757 -607

No files matched your search

+73
View File
@@ -0,0 +1,73 @@
use std::rc::Rc;
use dioxus::html::geometry::PixelsVector2D;
use dioxus::prelude::*;
#[derive(Clone, Routable, Debug, PartialEq)]
enum Route {
#[route("/")]
Home {},
#[route("/blog/:id")]
Blog { id: i32 },
}
fn main() {
dioxus::launch(App);
}
#[component]
fn App() -> Element {
use_context_provider(|| Signal::new(Scroll::default()));
rsx! {
Router::<Route> {}
}
}
#[component]
fn Blog(id: i32) -> Element {
rsx! {
GoBackButton { "Go back" }
div { "Blog post {id}" }
}
}
type Scroll = Option<PixelsVector2D>;
#[component]
fn Home() -> Element {
let mut element: Signal<Option<Rc<MountedData>>> = use_signal(|| None);
let mut scroll = use_context::<Signal<Scroll>>();
_ = use_resource(move || async move {
if let (Some(element), Some(scroll)) = (element.read().as_ref(), *scroll.peek()) {
element
.scroll(scroll, ScrollBehavior::Instant)
.await
.unwrap();
}
});
rsx! {
div {
height: "300px",
overflow_y: "auto",
border: "1px solid black",
onmounted: move |event| element.set(Some(event.data())),
onscroll: move |_| async move {
if let Some(element) = element.cloned() {
scroll.set(Some(element.get_scroll_offset().await.unwrap()))
}
},
for i in 0..100 {
div { height: "20px",
Link { to: Route::Blog { id: i }, "Blog {i}" }
}
}
}
}
}