Fix nav scroll behavior

manastech · Nov 15, 2023 · 82daee7 · 82daee7
1 parent ae8bdaa
commit 82daee7
Showing 1 changed file with 15 additions and 12 deletions.
diff --git a/components/Nav.js b/components/Nav.js
@@ -11,19 +11,22 @@ function Nav({ currentSection, contents }) {
     }
 
     useEffect(() => {
-        if(currentSection && currentSection.nav) {
-            if(currentSection.nav.offsetTop < container.scrollTop + header.clientHeight) {
-                container.scrollTo({
-                    behavior: 'smooth',
-                    top: currentSection.nav.offsetTop - header.clientHeight
-                })
-            } else if(container.scrollTop + window.innerHeight < currentSection.nav.offsetTop + currentSection.nav.clientHeight ) {
-                container.scrollTo({
-                    behavior: 'smooth',
-                    top: currentSection.nav.offsetTop + currentSection.nav.clientHeight - window.innerHeight
-                })
+        const timeout = setTimeout(() => {
+            if(currentSection && currentSection.nav) {
+                if(currentSection.nav.offsetTop < container.scrollTop + header.clientHeight) {
+                    container.scrollTo({
+                        behavior: 'smooth',
+                        top: currentSection.nav.offsetTop - header.clientHeight
+                    })
+                } else if(container.scrollTop + window.innerHeight < currentSection.nav.offsetTop + currentSection.nav.clientHeight ) {
+                    container.scrollTo({
+                        behavior: 'smooth',
+                        top: currentSection.nav.offsetTop + currentSection.nav.clientHeight - window.innerHeight
+                    })
+                }
             }
-        }
+        }, 100)
+        return () => clearTimeout(timeout)
     }, [currentSection])
 
     return (