fix: header stuck on certain threshold (#130)

On some cases if the scroll happens fast and multiples times, it will get stuck on a threshold and not call the `handleScroll` again, by cleaning the timeoutId everytime `handleScroll` gets called we ensure that it will not get stuck if scrolling happens too fast. Co-authored-by: J M Rossy <[email protected]>
hyperlane-xyz · Oct 24, 2024 · ed7eac9 · ed7eac9
1 parent 767bae2
commit ed7eac9
Showing 1 changed file with 1 addition and 1 deletion.
diff --git a/src/utils/useScrollListener.ts b/src/utils/useScrollListener.ts
@@ -11,6 +11,7 @@ export function useScrollThresholdListener(threshold: number, debounce = 300) {
       const handleScroll = () => {
         if (isDebouncing) return;
 
+        timeoutId.current = null;
         if (window.scrollY > threshold && !isAboveThreshold) {
           setIsAbove(true);
           setIsDebouncing(true);
@@ -24,7 +25,6 @@ export function useScrollThresholdListener(threshold: number, debounce = 300) {
         if (!timeoutId.current) {
           timeoutId.current = setTimeout(() => {
             setIsDebouncing(false);
-            timeoutId.current = null;
             handleScroll();
           }, debounce);
         }