Issue
After visiting the /inspire page, which implemented custom scroll hijacking for section-snapping behavior, scroll functionality across the entire site became completely disabled during client-side navigation. Users experienced a complete breakdown of scroll interactions, including mouse wheel, keyboard arrows, touch gestures, and scrollbar dragging, across all pages. A hard refresh was required to restore functionality.
Culprit
The issue stemmed from unconditional global event listener registration with e.preventDefault() in the scroll hijacking implementation. During Astro’s client-side navigation:
- Initial Load: The
/inspirepage executed scroll hijacking functions, registering listeners withe.preventDefault() - Navigation Away: When navigating to other pages, Astro’s
astro:page-loadevent triggered these functions without verifying if target elements (.category-section) existed - Global Blockage: New listeners with
e.preventDefault()were added even when no target elements existed, causing all scroll events to be blocked globally
Solution
The fix involved adding early return guard clauses to verify target elements exist before registering event listeners. This ensured:
- Conditional Registration: Event listeners are only added when required elements are present
- Preserved Scroll Behavior: Scroll functionality remained intact across all pages
- Minimal Overhead: Context checks added negligible performance impact
Key Technical Changes:
- Added element existence checks before listener registration
- Maintained
{ passive: false }for necessary scroll control - Preserved cleanup logic as a defensive measure
Files Modified: src/pages/inspire.astro