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

+59
View File
@@ -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();
}
}
},
}
}
}
}
}