feat(html): add scroll method to MountedData

examples/scroll_to_offset.rs

@@ -0,0 +1,64 @@
+//! 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;
+                            }
+                        }
+                    },
+                }
+            }
+        }
+    }
+}

packages/desktop/src/element.rs

@@ -104,6 +104,36 @@ impl RenderedElementBacking for DesktopElement {
         })
     }
 
+    fn scroll(
+        &self,
+        coordinates: PixelsVector2D,
+        behavior: dioxus_html::ScrollBehavior,
+    ) -> std::pin::Pin<Box<dyn std::future::Future<Output = MountedResult<()>>>> {
+        let script = format!(
+            "return window.interpreter.scroll({}, {}, {}, {});",
+            self.id.0,
+            coordinates.x,
+            coordinates.y,
+            serde_json::to_string(&behavior).expect("Failed to serialize ScrollBehavior")
+        );
+        let webview = self
+            .webview
+            .upgrade()
+            .expect("Webview should be alive if the element is being queried");
+        let fut = self.query.new_query::<bool>(&script, webview).resolve();
+        Box::pin(async move {
+            match fut.await {
+                Ok(true) => Ok(()),
+                Ok(false) => MountedResult::Err(dioxus_html::MountedError::OperationFailed(
+                    Box::new(DesktopQueryError::FailedToQuery),
+                )),
+                Err(err) => {
+                    MountedResult::Err(dioxus_html::MountedError::OperationFailed(Box::new(err)))
+                }
+            }
+        })
+    }
+
     fn set_focus(
         &self,
         focus: bool,

packages/html/src/events/mounted.rs

@@ -39,6 +39,15 @@ pub trait RenderedElementBacking: std::any::Any {
         Box::pin(async { Err(MountedError::NotSupported) })
     }
 
+    /// Scroll to the given element offsets
+    fn scroll(
+        &self,
+        _coordinates: PixelsVector2D,
+        _behavior: ScrollBehavior,
+    ) -> Pin<Box<dyn Future<Output = MountedResult<()>>>> {
+        Box::pin(async { Err(MountedError::NotSupported) })
+    }
+
     /// Set the focus on the element
     fn set_focus(&self, _focus: bool) -> Pin<Box<dyn Future<Output = MountedResult<()>>>> {
         Box::pin(async { Err(MountedError::NotSupported) })
@@ -119,6 +128,16 @@ impl MountedData {
         self.inner.scroll_to(behavior)
     }
 
+    /// Scroll to the given element offsets
+    #[doc(alias = "scrollTo")]
+    pub fn scroll(
+        &self,
+        coordinates: PixelsVector2D,
+        behavior: ScrollBehavior,
+    ) -> Pin<Box<dyn Future<Output = MountedResult<()>>>> {
+        self.inner.scroll(coordinates, behavior)
+    }
+
     /// Set the focus on the element
     #[doc(alias = "focus")]
     #[doc(alias = "blur")]

packages/interpreter/src/js/hash.txt

@@ -1 +1 @@
-[6449103750905854967, 17669692872757955279, 13069001215487072322, 11420464406527728232, 3770103091118609057, 5444526391971481782, 10130882040196587188, 5052021921702764563, 12925655762638175824, 5638004933879392817]
+[6449103750905854967, 17669692872757955279, 13069001215487072322, 11420464406527728232, 3770103091118609057, 5444526391971481782, 9840496485188455822, 5052021921702764563, 12925655762638175824, 5638004933879392817]