feat: support visual viewport

Author: DanielleHuisman

packages/dom/src/auto_update.rs

@@ -299,6 +299,7 @@ pub fn auto_update(
         let event_target: &EventTarget = match ancestor {
             OverflowAncestor::Element(element) => element,
             OverflowAncestor::Window(window) => window,
+            OverflowAncestor::VisualViewport(visual_viewport) => visual_viewport,
         };
 
         if ancestor_scoll {
@@ -457,6 +458,7 @@ pub fn auto_update(
             let event_target: &EventTarget = match ancestor {
                 OverflowAncestor::Element(element) => element,
                 OverflowAncestor::Window(window) => window,
+                OverflowAncestor::VisualViewport(visual_viewport) => visual_viewport,
             };
 
             if ancestor_scoll {

packages/dom/src/platform/get_clipping_rect.rs

@@ -96,6 +96,7 @@ fn get_clipping_element_ancestors(element: &Element) -> Vec<Element> {
                 (get_node_name((&element).into()) != "body").then_some(element)
             }
             OverflowAncestor::Window(_) => None,
+            OverflowAncestor::VisualViewport(_) => None,
         })
         .collect();
     let mut current_containing_block_computed_style: Option<CssStyleDeclaration> = None;

packages/leptos/tests/visual/src/utils/use_scroll.rs

@@ -108,6 +108,7 @@ pub fn use_scroll(
                 let event_target: &EventTarget = match parent {
                     OverflowAncestor::Element(element) => element,
                     OverflowAncestor::Window(window) => window,
+                    OverflowAncestor::VisualViewport(visual_viewport) => visual_viewport,
                 };
 
                 event_target
@@ -142,11 +143,10 @@ pub fn use_scroll(
 
     let cleanup = SendWrapper::new(move || {
         for ancestor in ancestors.get().iter() {
-            let event_target = match ancestor {
-                OverflowAncestor::Element(element) => {
-                    element.unchecked_ref::<web_sys::EventTarget>()
-                }
-                OverflowAncestor::Window(window) => window.unchecked_ref::<web_sys::EventTarget>(),
+            let event_target: &EventTarget = match ancestor {
+                OverflowAncestor::Element(element) => element,
+                OverflowAncestor::Window(window) => window,
+                OverflowAncestor::VisualViewport(visual_viewport) => visual_viewport,
             };
 
             event_target

packages/utils/src/dom.rs

@@ -1,7 +1,8 @@
 //! Utility functions for the DOM. Requires `dom` feature.
 
 use web_sys::{
-    CssStyleDeclaration, Document, Element, HtmlElement, Node, ShadowRoot, Window, css,
+    CssStyleDeclaration, Document, Element, HtmlElement, Node, ShadowRoot, VisualViewport, Window,
+    css,
     js_sys::Object,
     wasm_bindgen::{JsCast, JsValue},
     window,
@@ -357,8 +358,7 @@ pub fn get_nearest_overflow_ancestor(node: &Node) -> HtmlElement {
 pub enum OverflowAncestor {
     Element(Element),
     Window(Window),
-    // TODO
-    // VisualViewport(VisualViewport)
+    VisualViewport(VisualViewport),
 }
 
 pub fn get_overflow_ancestors(
@@ -376,8 +376,11 @@ pub fn get_overflow_ancestors(
     if is_body {
         let frame_element = get_frame_element(&window);
 
-        list.push(OverflowAncestor::Window(window));
-        // TODO: visual viewport
+        list.push(OverflowAncestor::Window(window.clone()));
+
+        if let Some(visual_viewport) = window.visual_viewport() {
+            list.push(OverflowAncestor::VisualViewport(visual_viewport));
+        }
 
         if is_overflow_element(&scrollable_ancestor) {
             list.push(OverflowAncestor::Element(scrollable_ancestor.into()));

packages/yew/tests/visual/src/utils/use_scroll.rs

@@ -115,6 +115,7 @@ pub fn use_scroll(options: UseScrollOptions) -> UseScrollReturn {
                         let event_target: &EventTarget = match parent {
                             OverflowAncestor::Element(element) => element,
                             OverflowAncestor::Window(window) => window,
+                            OverflowAncestor::VisualViewport(visual_viewport) => visual_viewport,
                         };
 
                         event_target
@@ -165,9 +166,10 @@ pub fn use_scroll(options: UseScrollOptions) -> UseScrollReturn {
 
                 move || {
                     for parent in parents {
-                        let event_target: EventTarget = match parent {
-                            OverflowAncestor::Element(element) => element.into(),
-                            OverflowAncestor::Window(window) => window.into(),
+                        let event_target: &EventTarget = match &parent {
+                            OverflowAncestor::Element(element) => element,
+                            OverflowAncestor::Window(window) => window,
+                            OverflowAncestor::VisualViewport(visual_viewport) => visual_viewport,
                         };
 
                         event_target