React Scroll-Snap Momentum
Stop fighting Mac trackpad momentum scrolling
React hooks for smooth section-by-section scrolling with intelligent momentum detection using delta pattern analysis
The Problem
When you build custom scroll-snap sections, Mac trackpads generate 40+ scroll events from a single swipe due to momentum/inertia.
This causes your page to skip multiple sections uncontrollably. Users hate it. Designers hate it. You'll hate debugging it.
The Solution
Delta Pattern Analysis
Detects momentum by analyzing scroll event timing, direction, and delta decay patterns
Adaptive Throttling
600ms for intentional scrolls, 1800ms for momentum cascades
Cross-Device Support
Works with trackpads, mice, and touch gestures on mobile
Quick Start
import { useScrollContainer } from './hooks/useScrollContainer';
function App() {
const { containerRef, sectionRefs, currentSection } =
useScrollContainer({
totalSections: 4,
updateURL: (index) => {
window.history.pushState(null, '', `#section-${index}`);
}
});
return (
<div ref={containerRef} className="h-screen overflow-y-scroll">
{['Home', 'About', 'Services', 'Contact'].map((section, i) => (
<div
key={section}
ref={el => sectionRefs.current[i] = el}
className="h-screen snap-start"
>
{section}
</div>
))}
</div>
);
}Features
Zero Dependencies
Just React. No external libraries.
TypeScript
Full type definitions included
Composable Hooks
Use individually or together
Production Ready
Tested across devices and browsers
Ready to Try It?
See it in action with a live demo, or grab the code and start building