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>

examples/router_restore_scroll.rs

@@ -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}" }
+                }
+            }
+        }
+    }
+}

examples/scroll_to_offset.rs

@@ -0,0 +1,59 @@
+//! Scroll elements using their MountedData
+//!
+//! Dioxus exposes a few helpful APIs around elements (mimicking the DOM APIs) to allow you to interact with elements
+//! across the renderers. This includes scrolling, reading dimensions, and more.
+//!
+//! In this example we demonstrate how to scroll to a given y offset of the scrollable parent using the `scroll` method on the `MountedData`
+
+use dioxus::html::geometry::PixelsVector2D;
+use dioxus::prelude::*;
+
+fn main() {
+    dioxus::launch(app);
+}
+
+fn app() -> Element {
+    rsx! {
+        ScrollToCoordinates {}
+        ScrollToCoordinates {}
+    }
+}
+
+#[component]
+fn ScrollToCoordinates() -> Element {
+    let mut element = use_signal(|| None);
+
+    rsx! {
+        div { border: "1px solid black", position: "relative",
+
+            div {
+                height: "300px",
+                overflow_y: "auto",
+
+                onmounted: move |event| element.set(Some(event.data())),
+
+                for i in 0..100 {
+                    div { height: "20px", "Item {i}" }
+                }
+            }
+
+            div { position: "absolute", top: 0, right: 0,
+                input {
+                    r#type: "number",
+                    min: "0",
+                    max: "99",
+                    oninput: move |event| async move {
+                        if let Some(ul) = element.cloned() {
+                            let data = event.data();
+                            if let Ok(value) = data.parsed::<f64>() {
+                                ul.scroll(PixelsVector2D::new(0.0, 20.0 * value), ScrollBehavior::Smooth)
+                                    .await
+                                    .unwrap();
+                            }
+                        }
+                    },
+                }
+            }
+        }
+    }
+}