Fix scrolling behaviour of Navigation on mobile

fabian-hiller · Jan 2, 2025 · a66d48e · a66d48e
1 parent b7d9a06
commit a66d48e
Showing 1 changed file with 22 additions and 15 deletions.
diff --git a/website/src/components/Navigation.tsx b/website/src/components/Navigation.tsx
@@ -81,21 +81,28 @@ const NavItem = component$<NavItemProps>(({ navElement, text, items }) => {
 
       // Scroll active element into view if needed
       if (activeElement) {
-        const parentClientRect = navElement.value!.getBoundingClientRect();
-        const childClientRect = activeElement.getBoundingClientRect();
-        if (
-          childClientRect.top < parentClientRect.top ||
-          childClientRect.bottom > parentClientRect.bottom
-        ) {
-          navElement.value!.scrollBy({
-            behavior: 'smooth',
-            top:
-              childClientRect.top -
-              parentClientRect.top -
-              parentClientRect.height / 2 +
-              childClientRect.height,
-          });
-        }
+        setTimeout(
+          () => {
+            const parentClientRect = navElement.value!.getBoundingClientRect();
+            if (parentClientRect.height > 0) {
+              const childClientRect = activeElement.getBoundingClientRect();
+              if (
+                childClientRect.top < parentClientRect.top ||
+                childClientRect.bottom > parentClientRect.bottom
+              ) {
+                navElement.value!.scrollBy({
+                  behavior: 'smooth',
+                  top:
+                    childClientRect.top -
+                    parentClientRect.top -
+                    parentClientRect.height / 2 +
+                    childClientRect.height,
+                });
+              }
+            }
+          },
+          window.innerWidth < 1024 ? 100 : 0
+        );
       }
     },
     { strategy: 'document-idle' }